css для отображения тега div

Question

Я хочу отобразить три тега div b1, b2, b3 внутри тега div контейнера asn. Я хочу показать тег b1, b2, b3, где я отмечен зеленым цветом. Но теперь он отображается в позиции, которую я обозначил красным цветом. Я уже работал с подобной концепцией. Этот код мне не помогает. Теперь я просто попробовал один div b1.

.box{ 
 
    height:500px; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    border-color: red; 
 
} 
 
.b1{ 
 
    width:250px; 
 
    height:175px; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    border-color: #0000A0; 
 
    margin:0; 
 
    padding:10px 0px 0 50px; 
 
    float:left; 
 
}

 <div class="box"> 
 
     <div class="b1"> 
 
     </div> <!--end of emp div --> 
 
     <div class="b2"> 
 
     </div> <!--end of cli div --> 
 
     <div class="b3"> 
 
     </div> <!--end of doc div --> 
 
    </div> <!--end of box div -->

Answer 1

Как это? Я изменил box на wrap, но добавил класс box для каждого из ваших полей. Кроме того, я определил ширину в% для каждого поля и добавил свойство diplay: inline-block вместо float:left.

Примечание: Пожалуйста, просмотрите фрагмент кода на всю страницу

html, 
 
body, 
 
div { 
 
    box-sizing: border-box; 
 
} 
 
.wrap { 
 
    height: 500px; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    border-color: red; 
 
    text-align: center; 
 
} 
 
.box { 
 
    width: 25%; 
 
    height: 175px; 
 
    padding: 10px 10px 0 10px; 
 
    display: inline-block; 
 
    text-align: left; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
}

<div class="wrap"> 
 
    <div class="box b1"> 
 
    <h2>Heading</h2> 
 
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> 
 
    </div> 
 
    <!--end of emp div --> 
 
    <div class="box b2"> 
 
    <h2>Heading</h2> 
 
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> 
 
    </div> 
 
    <!--end of cli div --> 
 
    <div class="box b3"> 
 
    <h2>Heading</h2> 
 
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> 
 
    </div> 
 
    <!--end of doc div --> 
 
</div> 
 
<!--end of box div -->

Answer 2

.wrap { 
 
    height: 500px; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    border-color: red; 
 
    text-align: center; 
 
} 
 
.box { 
 
    width: 25%; 
 
    margin-top:5px; 
 
    height: 175px; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    border-color: #0000A0; 
 
    padding: 10px 0px 0 50px; 
 
    display: inline-block; 
 

 
}

<div class="wrap"> 
 
    <div class="box b1"> 
 
    </div> 
 
    <!--end of emp div --> 
 
    <div class="box b2"> 
 
    </div> 
 
    <!--end of cli div --> 
 
    <div class="box b3"> 
 
    </div> 
 
    <!--end of doc div --> 
 
</div> 
 
<!--end of box div -->

Answer 3

.wrap { 
 
    padding: 10px 0; 
 
    background: green; 
 
} 
 
.box { 
 
    width: 80%; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
} 
 
.b { 
 
    width: 30%; 
 
    margin: 1%; 
 
    background: white; 
 
    float: left; 
 
    height: 100px; 
 
}

<div class="wrap"><div class="box"> 
 
    <div class="b1 b"></div> 
 
    <!--end of emp div --> 
 
    <div class="b2 b"></div> 
 
    <!--end of cli div --> 
 
    <div class="b3 b"></div> 
 
    <!--end of doc div --> 
 
</div></div> 
 
<!--end of box div -->