Вопрос по layout, css, html – Возможно ли для элемента inline-block автоматическое заполнение доступной ширины?

12

у меня есть<div id="content"> который содержит<div id="sub-navigation> а также<div id="main container">, которые являются inline-блоками. Я хотел бы иметь возможность сделатьmain container заполните оставшуюся часть доступной ширины страницы. Это возможно?

Palge Layout

я нуждаюсьcolumns-strip расширить или сжать в зависимости от количества и шириныcolumn элементы. Если ширинаcolumns-strip превышает ширинуmain container, тогда должна появиться горизонтальная полоса прокрутки.

CSS:

* {
  margin: 0px;
  padding: 0px;
  font-size: 10pt;
  white-space: normal; 
}

#wrapper {
  margin: 0px 20px; 
  background-color: red;
}

#header {
  margin: 25px 10px 10px 10px;
  height: 50px; 
  background-color: purple;
  color: white;
}

#content {
  margin: 10px; 
  padding: 10px; 
  font-size: 0pt; 
  white-space: nowrap; 
  overflow: hidden; 
  background-color: white;
}

#sub-navigation {
  width: 200px; 
  height: 150px; 
  display: inline-block; 
  vertical-align: top; 
  background-color: forestgreen; 
  color: white;
}

#main-container {
  padding: 10px; 
  display: inline-block; 
  overflow: auto; 
  background-color: yellow;
}

#columns-strip {
  padding: 10px; 
  font-size: 0pt; 
  white-space: nowrap; 
  background-color: mediumturquoise;
}

.posts-column {
  margin: 0px; 
  width: 200px; 
  height: 200px; 
  display: inline-block; 
  vertical-align: top; 
  overflow: auto;
}

#footer {
  margin: 10px 10px 25px 10px; 
  height: 50px; 
  background-color: navy;
}

HTML:

<div id="wrapper">
  <div id="header"></div>  
  <div id="content">    
    <div id="sub-navigation"></div>    
    <div id="main-container">
      <div id="columns-strip">    
        <div class="posts-column" style="background-color: lightgray;"></div>
        <div class="posts-column" style="background-color: darkgray;"></div>
        <div class="posts-column" style="background-color: gray;"></div>
      </div>
    </div>
  </div>
  <div id="footer"></div>
</div>
Кроме того, вы можете переосмыслить с помощьюpoints заfont-size. steveax
Итак, я должен отпуститьsub-navigation а такжеmain-container? Boris
Не сinline-block и без JavaScript нет. Phrogz
point является своего рода бессмысленным на экране и действительно рекомендуется только для таблицы стилей печати. Вы будете получать совершенно разные размеры шрифта при наведении курсора на экран. Много информации на межсетях,here's one, and another. steveax
@steveax, не уверен, что ты имеешь в виду. Точки не желательные единицы для размера шрифта? Не могли бы вы объяснить, пожалуйста? Boris

Ваш Ответ

4   ответа
0

inline-blocks должны быть использованы. Лучшее, что можно сделать здесь, это сделать ваше окно навигацииfloat:left и оставить по умолчаниюdisplay ценность одна.

0

рину, тогда да, вы можете сделать так, чтобы ваш основной контейнер заполнял доступное пространство. Но если вы не указываете ширины в своем CSS, то вам нужно определить, насколько большой ваш основной контейнер МОЖЕТ быть основан на визуализированной ширине содержащего элемента (оболочки). Единственный способ определить эту ширину после загрузки страницы - это JavaScript. Если вы хотите, чтобы ваш сайт имел динамическую ширину, но ваш контент (суб-навигация и основной контейнер) по-прежнему занимал весь экран, вам нужно будет использовать javascript или проценты, а проценты могут стать уродливыми, когда вы начнете смотреть на различные разрешения. мониторов, ноутбуков и т.д ...

Error: User Rate Limit Exceeded Boris
8

inline-block стили и плавать#sub-navigation дела.inline-block не подходит для того, что вы пытаетесь достичь. Когда вы не добавляете стили отображения,div элемент будет значением по умолчанию, котороеblock, block элементы занимают все доступное пространство по умолчанию. Плавая#sub-navigation Элемент, который вы делаете, занимает только место, необходимое для его содержимого.

#sub-navigation {
  width: 200px; 
  height: 150px; 
  float : left;
  vertical-align: top; 
  background-color: forestgreen; 
  color: white;
}

#main-container {
  padding: 10px;        
  overflow: auto; 
  background-color: yellow;
}

не забудьте добавитьclear: left элемент после#main-container

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededjsfiddle.net/cmT4x
Error: User Rate Limit Exceededdefinition as a divError: User Rate Limit ExceededdivError: User Rate Limit Exceeded#sub-navigationError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
-1

flex box model!!

Это сделано только для этого.

Обратите внимание, что в модели flexbox все дочерние элементы действуют как модели flex box, в которых вы не можете отказаться от определенных вещей. Это означает, что если страница имеет навигацию и под ней содержимое div + side div. Вы не можете сделать верхнюю навигацию из этого. Который имеет значение. Таким образом, решение состоит в том, чтобы иметь все вещи, только те, которые нуждаются в flex box в одном div.

Похожие вопросы