Question

代码：https://jsfiddle.net/w5aref0L/（请调整窗口大小以更好地了解我的代码在做什么）

<div class="left">
<div class="first">a a a</div>
<div class="second"><p>a a a</p></div>
</div>

.left{ width: auto; padding-left: 300px; overflow: auto; }
.first{ width: 300px; margin-left: -300px; background: red; float: left; }
.second{ width: 100%; min-width: 50%; background: blue; float: right; }

我想要达到的目标：如果蓝色DIV比300 px窄，那么我希望他跳到红色DIV下。不要漂浮在他旁边。

我试图设置他的最小宽度，但它不起作用。
我不想使用javascript
我不想使用@media

Answer 1

试试这个

添加此css：

.div{ height: 100px; display:inline-block;font-size:16px;}
.first{background-color: red; width: 300px; max-width:300px;}
.second{background-color: blue; width:300px;max-width:300px;}

添加html：

<div class="first">a a a</div>
<div class="second">a a a</div>

演示：https://jsfiddle.net/abhishek2290/9kawkujf/

Answer 2

如果我理解你想要达到的目标，解决方法是使用width:calc(100% - 300px)作为第二个div，而不是100%，并将其浮动到左侧。

.first {width:300px; background:red; float:left;}
.second {width:calc(100% - 300px); min-width:300px; background:blue; float:left;}

<div class="left">
<div class="first">a a a</div>
<div class="second"><p>a a a</p></div>
</div>

我也冒昧地删除了负边缘，因为这看起来像是一些失败的试图让它发挥作用的遗留下来。

如果这不是你想要的，请告诉我，我们可以解决一些问题！

编辑：你说你不想使用@media，但是如果你改变主意，这是一个使用它的解决方案。

.first {width:300px; background:red;}
.second {width:300px; background:blue;}
.second p {margin:0; padding:1em 0;}

@media (min-width: 601px) {
  .first {float:left;}
  .second {margin-left:300px;}
}

<div class="left">
<div class="first">a a a</div>
<div class="second"><p>a a a</p></div>
</div>

如果100％DIV小于300 px，则不会浮动

2 个答案: