0

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

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

div 左 - 宽度：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

4

1 回答 1

1

width:400px从中删除#sidebar，它将按照您想要的方式运行。

使用have和at ，您.left的容器需要至少 450px 宽才能容纳它们。width:250px.rightmin-width:200pxleft | right

于 2013-09-13T14:40:48.203 回答