Макет: один столбец настолько широк, насколько ему нужно, а другой занимает оставшееся пространство.

Мне нужен двухэтажный макет, как и таблица, где я не знаю, насколько широкие столбцы.Макет: один столбец настолько широк, насколько ему нужно, а другой занимает оставшееся пространство.

Мне нужен правый столбец, чтобы он был таким же широким, как его содержимое (без переноса слов), а левый столбец занимал оставшееся пространство, делая перенос слов, если нет свободного места.

Правая колонка в порядке, в то время как левый div mainInfos идет поверх нее, если содержимое нуждается в ней.

Я хочу, чтобы колонны были бок о бок. Что я могу сделать для достижения этого результата?

Контейнер имеет фиксированную ширину. Я бы не хотел использовать jquery.

#post { 
 
\t overflow: hidden; 
 
\t width: 400px; 
 
\t border: solid 1px; 
 
} 
 
#post .mainInfos { 
 
\t overflow: hidden; 
 
} 
 
#post .details { 
 
\t float: right; 
 
}

<div id="post"> 
 
\t <div class="mainInfos">really really long content that should be wrapped and should be all at the left of "small content", on the same line</div> 
 
\t <div class="details">small content</div> 
 
</div>

источник

2017-01-26 cdarwin

Согласно ниже ответ, используйте Flexbox. Если вы не сталкивались с этим раньше. Помимо документации (https://css-tricks.com/snippets/css/a-guide-to-flexbox/), это хороший ресурс – zik

Вы можете использовать Flexbox для этого:

Добавить display: flex в контейнер post
Добавить white-space: nowrap в details предотвратить его обертывание
Добавить flex: 1 в mainInfos, чтобы оставить оставшееся пространство.

Смотреть демо ниже:

#post { 
 
    display: flex; 
 
    width: 400px; 
 
    border: solid 1px; 
 
} 
 
#post .mainInfos { 
 
    flex: 1; 
 
} 
 
#post .details { 
 
    white-space: nowrap; 
 
}

<div id="post"> 
 
    <div class="mainInfos">really really long content that should be wrapped and should be all at the left of "small content", on the same line</div> 
 
    <div class="details">small content</div> 
 
</div>

источник

2017-01-26 16:18:15 kukkuz

Использование Flexbox, Сначала снимите поплавок: прямо на правой колонке. Добавить в родительский элемент (#post) это,

display: flex

Documentation here

источник

2017-01-26 16:17:43

Одна альтернативы Flexbox, которая работает в новых и старых браузерах использовать display:table-cell на внутренней диве:

#post { 
 
    overflow: hidden; 
 
    width: 400px; 
 
    border: solid 1px; 
 
} 
 
#post > div { 
 
    display: table-cell; 
 
} 
 
#post .details { 
 
    white-space: nowrap; 
 
}

<div id="post"> 
 
    <div class="mainInfos">really really long content that should be wrapped and should be all at the left of "small content", on the same line</div> 
 
    <div class="details">small content</div> 
 
</div>

источник

2017-01-26 16:22:56 j08691

. Правильно использовать отображение: inline-cell без родителя с отображением: table ? – cdarwin

это действительно длинный контент короткий, «маленький контент» не соответствует выровненному значению – cdarwin

@cdarwin да к первому вопросу, и вы можете изменить отображение родительского div в таблицу и предоставить детали div текстовое выравнивание справа – j08691

Пожалуйста, проверьте пример. Я думаю, это поможет вам.

#post { 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
    -moz-box-align: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0 0 400px; 
 
    -moz-box-flex: 0; 
 
    -ms-flex: 0 0 400px; 
 
    flex: 0 0 400px; 
 
    overflow: hidden; 
 
    width: 400px; 
 
    border: solid 1px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 50px; 
 
    padding: 5px; 
 
    -webkit-box-pack: justify; 
 
    -webkit-justify-content: space-between; 
 
    -moz-box-pack: justify; 
 
    -ms-flex-pack: justify; 
 
    justify-content: space-between; 
 
} 
 

 
#post .mainInfos, 
 
#post .details { 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
    -moz-box-align: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    background-color: #f6f6f6; 
 
    border: 1px solid #989898; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: start; 
 
    -webkit-justify-content: flex-start; 
 
    -moz-box-pack: start; 
 
    -ms-flex-pack: start; 
 
    justify-content: flex-start; 
 
    padding: 10px; 
 
}

<div id="post"> 
 
      <div class="mainInfos"> 
 
       really really long content that should be wrapped and should be all at the left of "small content", on the same line 
 
       <br /> 
 
       really really long content that should be wrapped and should be all at the left of "small content", on the same line 
 
      </div> 
 
      <div class="details"> 
 
       small content<br /> 
 
       small content<br /> 
 
       small content<br /> 
 
       small content<br /> 
 
       <br /> 
 
       really really long content that should be wrapped and should be all at the left of "small content", on the same line 
 
      </div> 
 
     </div>

источник

2017-01-26 16:27:44 Rahul

Макет: один столбец настолько широк, насколько ему нужно, а другой занимает оставшееся пространство.

ответ

Смежные вопросы