Макет столбца CSS 2 без поплавков
Я новичок в HTML / CSS, и мне нужна довольно простая вещь - макет из двух столбцов, где правый столбец получает ширину в соответствии с его содержимым (текстом), а левый столбец занимает остальное пространство.
Я смог сделать это с помощью floats - в основном правый div перемещался вправо, а левый div использовал некоторую магию overflow: auto, чтобы получить оставшуюся площадь:
body, html {
margin: 0;
height: 100%;
}
.ellipsize {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.right {
float: right;
width: auto;
background-color: orange;
height: 100%;
}
.left {
background-color: black;
width: auto;
overflow: auto;
height: 100%;
color: white;
}<div class='right'>HELLO WORLD!!!</div>
<div class='left'>
<div class = "ellipsize">Lorizzle ipsum shiznit black amizzle, fo shizzle adipiscing tellivizzle. Nullizzle sapien velizzle, volutpat, suscipit bow wow wow, gravida i'm in the shizzle, stuff. We gonna chung i saw beyonces tizzles and my pizzle went crizzle tortizzle. Gangster erizzle. Brizzle izzle dolizzle my shizz turpizzle tempizzle fo shizzle. Maurizzle fo shizzle nibh shizzlin dizzle gangsta. Own yo' izzle yo mamma. Yo the bizzle rhoncus away. In black habitasse platea black. Phat dapibizzle. Curabitur tellizzle urna, pretizzle eu, mattizzle pot, break yo neck, yall vitae, nunc. Mammasay mammasa mamma oo sa suscipizzle. Shizznit sempizzle fizzle shiz yo.
</div>
</div>Тем не менее, я недавно прочитал много сообщений о том, что floats - это неправильный, старый стиль, не следует использовать и так далее, и все говорят, что вместо этого нужно использовать display: inline-block.
Вопрос: можно ли добиться такого же эффекта с inline-block или без floats?
Поплавки в порядке - пусть шум не говорит вам об обратном. Хотя гибкость и сетка - это круто для вашей ситуации, это не проблема.
Ответы 2
However, I have recently read a lot of posts about how floats are wrong, old-style, should not be used and so on
Если вы ищете более современное решение, использование флексбоксов - одно из них. Вот как можно добиться желаемого эффекта, обернув контент в оболочку с display:flex.
.wrapper{
display:flex;
flex-direction:row-reverse;
}
.right{
background-color:pink;
}
.left{
background-color:lightgreen
}<div class = "wrapper">
<div class='right'>HELLO WORLD!!!</div>
<div class='left'>
<div class = "ellipsize">Lorizzle ipsum shiznit black amizzle, fo shizzle adipiscing tellivizzle. Nullizzle sapien velizzle, volutpat, suscipit bow wow wow, gravida i'm in the shizzle, stuff. We gonna chung i saw beyonces tizzles and my pizzle went crizzle tortizzle. Gangster erizzle. Brizzle izzle dolizzle my shizz turpizzle tempizzle fo shizzle. Maurizzle fo shizzle nibh shizzlin dizzle gangsta. Own yo' izzle yo mamma. Yo the bizzle rhoncus away. In black habitasse platea black. Phat dapibizzle. Curabitur tellizzle urna, pretizzle eu, mattizzle pot, break yo neck, yall vitae, nunc. Mammasay mammasa mamma oo sa suscipizzle. Shizznit sempizzle fizzle shiz yo.
</div>
</div>
</div>Круто, я попробую, спасибо! До "уроков" flex еще не дошел, новенький как писал: D
Нет проблем, флексию действительно хорошо изучать, и это относительно легко :)
Я только что заметил, что размер правой стороны не определяется содержанием текста «привет, мир», поэтому он в основном не дает полного ответа на вопрос. Как я могу сделать так, чтобы ширина правой части динамически изменялась в зависимости от ширины текста, чтобы полностью его вместить?
Если вы имеете в виду, что текст разбивается на другую строку, вы можете присвоить ему свойство white-space: nowrap
используйте display: flex. Он будет работать отлично, и если вы хотите, чтобы это было отзывчивым, используйте flex-wrap: wrap.
.ellipsize {
display: flex;
flex-wrap: wrap
}
imo, вы не можете добиться эффекта «левый занимает оставшееся место», используя встроенный блок. Я не вижу ничего плохого в использовании поплавков. Имейте в виду, что бутстрап по-прежнему строит свою сеточную систему с использованием поплавков.