Question

我希望将两个div并排排列。但是如果具有最小宽度的正确div不适合，那么它就会降下来！

<div id="sidebar">
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</div>

div left - width：250px; div right - min-width：200px;

如果#sidebar有400px，那么：

left | right

如果#sidebar小于400px则：

left
right

试验：

<html>
<head>
<style>
    #sidebar {width: 30%; background: #FFC;}
    .box {overflow: hidden;}
    .left {background: #F00; float: left; width: 250px;}
    .right {background: #FF0; min-width: 200px; display: inline-block;}
    .image {background: #222; width: 250px; height: 180px; display: block;}
</style>
</head>
<body>
<div id="sidebar">
    <div class="box">
        <div class="left"><span class="image"></span></div>
        <div class="right">Bla blabla blablabla bla bla<br />Blabla bla blablabla blabla blablabla bla blabla blablabla bla blabla blablabla bla blabla.</div>
    </div>
</div>
</body>
</html>

修改

#sidebar占我网站正文的30％！当这些30％代表多于或少于400px时怎么办？！

编辑2

实施例： http://i.stack.imgur.com/suShQ.png

Answer 1

从width:400px移除#sidebar，它会按照您想要的方式行事。

.left width:250px和.right位于min-width:200px，您的容器需要至少450px宽才能容纳left | right。

将div并排对齐，但是以最小宽度对齐

修改

编辑2

1 个答案: