Использование поплавка в HTML

Question

Проблемы с установкой правильного поля на веб-странице и использованием float. Нужно, чтобы при просмотре на рабочем столе все 3 раздела располагались в одну строку и чтобы в разделе 3 было правильное поле. https://chawlaji8781.github.io/module2-solution/index.html https://chawlaji8781.github.io/module2-solution/CSS/style.css

Answer 1

оберните ваши разделы с div с классом. и использовать этот класс, чтобы отобразить его как flex. Вот демонстрационный код.

<div class="row">
<section id="s1">
    <h2 id="d1">Chicken</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis.</p>
</section>
<section id="s2">
    <h2 id="d2">Beef</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis.</p>
</section>
<section id="s3">
    <h2 id="d3">Sushi</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis.</p>
</section>
</div>

CSS:

.row {
display: flex;
}

Answer 2

, потому что вы должны понимать, как работает свойство box-sizing:

когда вы задаете section ширину 33.3%, вы можете подумать, что это означает 3 * 33,3 = 99,9, поэтому три раздела будут в той же строке, но вы пропустили поля разделов, которые следует учитывать

каждый раздел имеет 15px слева и 15px справа, и это означает, что 3 раздела имеют 30 * 3 = 90px вы следует вычесть из общей ширины

, поэтому окончательный расчет должен быть похож на следующий фрагмент:

section {
width: calc((100% - 90px) /3);
}

• 100% = полная ширина
• 90px = общая разница из 3-х секций

Answer 3

<div class="holder">

            <div class="1">
                    <div class="s1">
                       <h2 id="d1">Chicken</h2>
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis.</p>

                    </div>
            </div>

            <div class="2">
                    <div class="s2">
                        <h2 id="d2">Beef</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis.</p>
                    </div>
            </div>

            <div class="3">
                    <div class="s3">
                        <h2 id="d3">Sushi</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis.</p> 
                    </div>
            </div>

</div>



<-----------------------------------

.holder {
    padding-bottom: 6vh;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

попробуйте любые ошибки, дайте мне знать