Как сделать так, чтобы текст обтекал flex элемент и занимал пустое пространство под ним?

Question

как сделать так, чтобы текст обтекал блок .spec и чтобы текст занимал пустое пространство под ним?

html, body {
    font-size:16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    
}

a {
    border-bottom: 1px dotted #a9e0ff;
    text-decoration: none;
    padding-bottom: 1px;
    color: #23afff;
}

a:hover {
    border: 0;
}

.wrapper {
    width: 60%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 60px;
}

.wrapper.news .block .info {
    display: flex;
}

.wrapper.news .block h2 {
    font-size: 24px;
    color: #454545;
    text-align: center;
    font-weight: 500;
    margin-bottom: 60px;
    line-height: 1.2;
}

.wrapper.news .block p {
    color: #a0a0a0;
    text-align: justify;
    margin: 0 0 15px 0 ;
}

.wrapper.news .block p:last-of-type {
    margin-bottom: 40px;
}

.wrapper.news .block .spec img {
    float: right;
    margin: 0 0 60px 60px;
    width: 100%;

}



.wrapper.news .block .spec {
    min-width: 300px;
    margin-left: 60px;
    
}

.spec table {
    font-size: 12px;
    width: 100%;
    border-spacing: 0;
}

.spec table td:nth-child(2n) {
    text-align: right;
}

.spec table td {
    border-bottom: 1px solid #d0d0d0;
    padding: 10px;
}

.btn {
    background-color: #a9e0ff;
    color: #fff;
    padding: 10px 40px;
    transition: 0.3s;
    border-bottom: 0;
}

.btn:hover {
    background-color: #23afff;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<link href="style.css" rel="stylesheet" type="text/css" />
<link href="adaptive.css" rel="stylesheet" type="text/css" />

<script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>

<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,700,800,900&display=swap" rel="stylesheet">

<title>PrimaLuna premium Pre silver</title>

<meta name="viewport" content="width=device-width" />

</head>

<body>
    
    <div class="wrapper news">
        <div class="block">
            <h2>PrimaLuna premium Pre silver</h2>
            
            <div class="info">
                
            <div class="content">
                <p>Ламповый престижный предварительный усилитель <a href="https://www.pult.ru/product/primaluna-dialogue-premium-pre-silver?ref=cpc_google&gclid=CjwKCAiAqJn9BRB0EiwAJ1SztetIA8JuL58IcFYpMGMQ5Fdr2XGkblzy8oonYZuDA5_vxC9x0rnc0BoC3Q8QAvD_BwE#about" target="_blank">PrimaLuna DiaLogue Premium Pre</a> относится к классу High End. Корпус его, отполированный вручную, изготовлен из металла и снаружи покрыт несколькими слоями глянцевого лака.</p>
                <p>Два силовых трансформатора, находящихся на верхней части усилителя, закрыты кожухом с прорезами для вентиляции. Слева алюминиевого корпуса расположен регулятор громкости, а справа – селектор входов. После нажатия на кнопку питания, расположенную в левой части, загорается светодиод, который установлен посередине. Пульт дистанционного управления изготовлен из особого вида алюминия.</p>
                <p>Главной особенностью данного предусилителя считается наличие шести двойных триодов 12AU7, т.е. не по два на канал, как у большинства моделей PrimaLuna, а по три. Такое отличие обеспечивает высокую пропускную способность и улучшение разрешения сигнала. Таким образом, выходной импеданс снизился до 256 Ом, а степень искажений снизилась в первом каскаде при малой громкости в 5 раз.</p>

                    <a class="btn" href="https://www.pult.ru/product/primaluna-dialogue-premium-pre-silver?ref=cpc_google&gclid=CjwKCAiAqJn9BRB0EiwAJ1SztetIA8JuL58IcFYpMGMQ5Fdr2XGkblzy8oonYZuDA5_vxC9x0rnc0BoC3Q8QAvD_BwE#about" target="_blank">Подробнее</a>

            </div>
            <div class="spec">
                <img src="photo.jpg">
                <table>
                    <tr>
                        <td>Потребляемая мощность, Вт</td>
                        <td>61</td>
                    </tr>
                    
                    <tr>
                        <td>Высота, мм</td>
                        <td>211</td>
                    </tr>
                    <tr>
                        <td>Ширина, мм</td>
                        <td>381</td>
                    </tr>
                    <tr>
                       <td>Глубина, мм</td>
                       <td>361</td>
                    </tr>
                    <tr>
                       <td>Вес, кг</td>
                       <td>24</td>
                    </tr>   
                     
                </table>
            </div>
        </div>
    </div>
            
  </div>         
       
</body>
</html>

БЛОГ НА HUSL

Как сделать так, чтобы текст обтекал flex элемент и занимал пустое пространство под ним?

Ответы (0 шт):