min-width и max-width игнорируются, когда элемент имеет display: table-cell - PullRequest
Новая
       14

min-width и max-width игнорируются, когда элемент имеет display: table-cell

6 голосов
/ 06 октября 2009

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

Знаете ли вы какой-нибудь обходной путь, который позволил бы мне указать, насколько далеко элемент #sidebar может растягиваться в следующем примере?

XHTML: 

<div id="wrapper">

  <div id="main">
  </div>

  <div id="sidebar">
  </div>

</div>

CSS: 

#wrapper {
display: table-row;
border-collapse: collapse;
}

  #main {
  display: table-cell;
  }

  #sidebar {
  display: table-cell;
  width: 30%;
  min-width: 100px;  /* does not work! */
  max-width: 310px;  /* does not work! */
  }

Ответы [ 3 ]

6 голосов
/ 06 октября 2009

Добавьте еще одну обертку внутри каждого div: 

<div id="wrapper">

  <div id="main">
    <div class="inner"></div>
  </div>

  <div id="sidebar">
    <div class="inner"></div>
  </div>

</div>

И поставить на них *-width декларации: 

#sidebar div.inner {
    min-width: 100px;
    max-width: 300px;
}
1 голос
/ 31 марта 2015

Я смотрю на адаптивный дизайн для сайта, который отображает влево -> вправо, а затем вниз и хочу достичь минимальной ширины самостоятельно. Делая небольшое исследование, я думаю, что это может ответить на этот вопрос.

* ** 1003 тысяча два *https://css -tricks.com / альманах / Свойства / м / макс-ширина /
0 голосов
/ 06 октября 2009

Если вы просто пытаетесь выполнить боковую панель и основную настройку, используйте float: left вместо table-row и table-cell. Затем вы можете указать минимальную ширину идентификатора.

...