Как сделать внутренние divs подходящими для содержимого в нижнем html Я пробовал с дисплеем: встроенный блок, но он перемещает второй div на дно.Как сделать содержимое подходящим для divs с помощью css
<div class="ms-table">
<div class="tableCol-75">
</div>
<div class="tableCol-25">
</div>
</div>Там вы идете:
.ms-table {
width: 80%;
}
.tableCol-70 {
float: left;
width: 70%;
border: 1px solid black;
margin-right: 10px;
}
.tableCol-25 {
float: left;
width: 25%;
border: 1px solid blue;
}<div class="ms-table">
<div class="tableCol-70">
My name is abc and I live in ams.
</div>
<div class="tableCol-25">
I love junk food even though it is unhealthy
</div>
</div>Моя любимая часть вашего кода .tableCol-75 с шириной 70%. –
Hahah хорошая точка. Позвольте мне изменить его;) – EduardoFernandes
Там вы идете :)! – EduardoFernandes
использование display: table
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.ms-table{
display: table;
width: 100%;
height: 100px;
}
.table-cell{
display: table-cell;
vertical-align: top;
padding: 15px;
}
.tableCol-75{
width: 75%;
background: #ccc;
}
.tableCol-25{
width: 25%;
background: #000;
color: #fff;
}<div class="ms-table">
<div class="table-cell tableCol-75">75%</div>
<div class="table-cell tableCol-25">25%</div>
</div>использование display: inline-block;
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.ms-table{
width: 100%;
min-height: 100px;
}
.table-cell{
display: inline-block;
vertical-align: top;
padding: 15px;
}
.tableCol-75{
width: 75%;
background: #ccc;
}
.tableCol-25{
width: 25%;
background: #000;
color: #fff;
}<div class="ms-table">
<div class="table-cell tableCol-75">75%</div><!--
--><div class="table-cell tableCol-25">25%</div>
</div>Спасибо, Dmitriy попробует это. – user3476088
Не хватает действительно информации. Если кто-то падает, и вы хотите, чтобы они были встроенными, то это проблема с шириной некоторого типа. Использование встроенного блока является правильным, но оно не будет заставлять их на месте, если допускается ширина их дочерних элементов больше, чем позволяет родительский контейнер. Проверьте правила в классах css. Посмотрите на вещи, такие как набивка. Также использование max-width, а не ширины позволит им сжиматься до соответствия. – SeanOlson
Ваш вопрос не имеет никакого смысла. Вам нужно перефразировать его или расширить на нем. Вы пытаетесь сделать два внутренних divs горизонтально? Вертикально? –
Сделайте внутреннее div подходящим содержимым ????? Div автоматически расширяется, чтобы соответствовать содержимому. Ясно, что нужно расширить/перефразировать вопрос. – Andrew