css для отображения содержимого с вершины div

Question

Я хочу отображать содержимое всех div, должно начинаться с from.Now у меня проблема с текстом, который отображается аномальным.Проверьте фрагмент, и я хочу отобразить оба заголовка 1 и заголовок 2 должны начинаться с вершины. Но заголовок 1 отображается сверху, а заголовок 2 начинается немного ниже.

.wraper { 
 
    
 
    border-style: solid; 
 
    border-width: 2px; 
 
    border-color: red; 
 
    text-align: center; 
 
} 
 
.boxer { 
 
    width: 25%; 
 
    height: 175px; 
 
    padding: 10px 10px 0 10px; 
 
    display: inline-block; 
 
    text-align: left; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
}

<div class="wraper"> 
 
    <div class="boxer b1"> 
 
    <h2>Heading 1</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.Donec id elit non mi porta gravida at eget metus. Donec sed odio dui</p> 
 
    </div> 
 
    <!--end of emp div --> 
 
    <div class="boxer b2"> 
 
    <h2>Heading 2</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="boxer b3"> 
 
    <h2>Heading 3</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 -->

редактировать заголовок 1 содержания и увидеть variation.I хочет отобразить его из верхней части сНу тега.

Answer 1

Дайте vertical-align:top; для .boxer и удалить статическую высоту (height: 175px;) будет решить вашу проблему.

Потому что по умолчанию, если вы даете display: inline-block, то vertical-align:baseline;

.wraper { 
 
    
 
    border-style: solid; 
 
    border-width: 2px; 
 
    border-color: red; 
 
    text-align: center; 
 
} 
 
.boxer { 
 
    width: 25%; 
 
    padding: 10px 10px 0 10px; 
 
    display: inline-block; 
 
    vertical-align:top; 
 
    text-align: left; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
}

<div class="wraper"> 
 
    <div class="boxer b1"> 
 
    <h2>Heading 1</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.Donec id elit non mi porta gravida at eget metus. Donec sed odio dui</p> 
 
    </div> 
 
    <!--end of emp div --> 
 
    <div class="boxer b2"> 
 
    <h2>Heading 2</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="boxer b3"> 
 
    <h2>Heading 3</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

Немного непонятно, но я думаю, вам нужно установить vertical-align:top; на ваши inline-block элементов.

Примечание: Я также удалил фиксированные ВЫСОТЫ

.wraper { 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    border-color: red; 
 
    text-align: center; 
 
} 
 
.boxer { 
 
    width: 25%; 
 
    /*height: 175px; */ 
 
    padding: 10px 10px 0 10px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    text-align: left; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
}

<div class="wraper"> 
 
    <div class="boxer b1"> 
 
    <h2>Heading 1</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.Donec id elit non 
 
     mi porta gravida at eget metus. Donec sed odio dui</p> 
 
    </div> 
 
    <!--end of emp div --> 
 
    <div class="boxer b2"> 
 
    <h2>Heading 2</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="boxer b3"> 
 
    <h2>Heading 3</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 3

Добавить поплавок: левый в .boxer следующего

.boxer { 
width: 25%; 
height: 175px; 
padding: 10px 10px 0 10px; 
display: inline-block; 
text-align: left; 
margin-left: 20px; 
margin-right: 20px; 
float:left; 
}