Левый - средний - правый контент с элементами ответа - PullRequest
Новая
       10

Левый - средний - правый контент с элементами ответа

0 голосов
/ 20 сентября 2019

Содержимое должно быть отзывчивым, чтобы оно не мешало друг другу. HTML: 

<div id="ContentPanel1">
  <div id="ContentLeft1">  Mars (Distance: 100) </div>
  <div id="ContentMiddle1"> Middle </div>
  <div id="ContentRight1"> Right </div> 
</div>

CSS: 

#ContentPanel1 {
    text-align:center
}
#ContentLeft1 {
    background:Yellow;
    float: left;
    width: 80px;
}
#ContentMiddle1 {
    background:Orange;
    float: left;
    width: calc(100% - 160px);
}
#ContentRight1 {
    background:Blue;
    float: right;
    width: 80px;
}

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

Ответы [ 2 ]

0 голосов
/ 22 сентября 2019

добавьте следующее к каждому из классов вашей ширины CSS: 33,3% 'box-sizing: border-size;ПРИМЕЧАНИЕ: сделайте вашу ширину результатом деления 100% на количество делений, которое вы хотите в каждой строке.

0 голосов
/ 20 сентября 2019

Как уже упоминалось в комментариях, это легко достигается с помощью display: flex.Если вы установите min-width или width для каждого элемента и используете flex-wrap: wrap, элементы будут автоматически перенесены на следующую строку.Я думаю, что это соответствует тому, что вы имеете в виду, когда говорите «не путайтесь друг с другом», но поправьте меня, если я ошибаюсь.

Ваш код может выглядеть примерно так (вы можете запустить сниппет и изменить размер окна браузера, чтобы проверить отзывчивость): 

#ContentPanel1 {
    text-align:center;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}
#ContentLeft1 {
    background:Yellow;
    width: 80px;
}
#ContentMiddle1 {
    background:Orange;
    width: calc(100% - 160px);
    min-width: 200px;
}
#ContentRight1 {
    background:Blue;
    width: 80px;
}
<div id="ContentPanel1">
  <div id="ContentLeft1">  Mars (Distance: 100) </div>
  <div id="ContentMiddle1"> Middle </div>
  <div id="ContentRight1"> Right </div> 
</div>
...