Question

我的测试响应式设计存在问题。如果达到最小宽度，侧边栏永远不应该在下一行中断。（如果分辨率为600px，则溢出/滚动条很好）

守则：

＆＃13;

body {
  padding: 0;
  margin: 0;
  width: 100%;
}

.wrapper {
  min-width: 600px;
  max-width: 800px;
  margin: auto;
}

.wrapper::after {
  content: "";
  display: block;
  clear: both;
}

.content {
  float: left;
  width: 75%;
  background: lightblue;
}

.sidebar {
  float: right;
  width: calc(25% - 20px);
  min-width: 150px;
  background: lightgrey;
  margin-left: 20px;
}

＆＃13;

<div class="wrapper">
  <div class="content">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div class="sidebar">
    min-widht <br>
    sidebar
  </div>
</div>

＆＃13;

（在完整窗口中打开）

侧边栏具有最小宽度（需要此最小宽度以确保内容显示良好）。相反应该缩小内容。它一直有效，直到特定分辨率/调整大小然后中断。

fyi：请不要使用JS解决方案。

提前致谢

Answer 1

尝试使用flexbox：

您可以避免明确修复
父级容器在浮动时不考虑孩子的维度

下面的片段（添加评论）：

＆＃13;

body {
  padding: 0;
  margin: 0;
  width: 100%;
}
.wrapper {
  min-width: 600px;
  max-width: 800px;
  margin: auto;
  /* set flex on parent */
  display: flex;
  flex-direction: row;
}
/* .wrapper::after {
  content: "";
  display: block;
  clear: both;
} */

.content {
  /* float: left; */
  width: 75%;
  background: lightblue;
}
.sidebar {
  /* float: right; */
  width: calc(25% - 20px);
  min-width: 150px;
  background: lightgrey;
  margin-left: 20px;
}

＆＃13;

<div class="wrapper">
  <div class="content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div class="sidebar">
    min-widht
    <br>sidebar
  </div>
</div>

＆＃13;

响应内容+侧边栏：新行中侧边栏中断的最小宽度

1 个答案: