gpt4 book ai didi

css - 并排对齐 div,但 div 与最小宽度对齐

转载 作者:太空宇宙 更新时间:2023-11-04 14:35:23 28 4
gpt4 key购买 nike

我想并排对齐两个 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

最佳答案

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

.leftwidth:250px.rightmin-width:200px,你的容器需要至少 450px 宽以容纳 left |对了

关于css - 并排对齐 div,但 div 与最小宽度对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18788998/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com