响应Content+Sidebar:新行中侧边栏中断的最小宽度
响应Content+Sidebar:新行中侧边栏中断的最小宽度
提问于 2017-01-31 14:26:14
我的测试响应设计有问题。
如果达到最小宽度，侧边栏就不应该在下一行中断.(如果分辨率低于600 if，则溢出/滚动条很好)
守则：
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;
}<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>
(全窗打开)
边栏有最小宽度(需要此最小宽度以确保内容显示良好)。相反，内容应该变得更小。它一直工作到特定的分辨率/调整大小，然后中断。
请不要使用JS解决方案。
提前感谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-01-31 14:40:32
试着用柔性盒：
- 您可以避免使用清晰的修补程序。
- 父容器在浮动时不考虑子容器的大小
下面的片段(添加注释)：
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;
}<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41960022
复制相关文章
相似问题
腾讯云开发者
