CSS：如何在一行中设置多个 100% 宽度的 div？

发布于 2024-12-21 22:18:06 字数 449 浏览 0 评论 0 原文

类似的问题是这里但我的 div 根本没有固定大小。我需要遵循结构：

<div style="float:left;"></div>
<div style="float:left;"></div> <!-- this div should be what's left after the first and third divs -->
<div style="float:right;"></div>

我尝试为第二个 div 设置 overflow:hidden; 但没有帮助。

原文

The similar question was here but my divs haven't fix size at all. I need follow stucture:

<div style="float:left;"></div>
<div style="float:left;"></div> <!-- this div should be what's left after the first and third divs -->
<div style="float:right;"></div>

I have tried to set overflow:hidden; for the second div but it doesn't help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一世旳自豪 2024-12-28 22:18:06

您可以通过 white-space 和 white-space 的组合来实现。 display:inline-block 像这样：

HTML:

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">2</div>
</div>

CSS:

.child{
    display:inline-block;
    *display:inline; /* for IE7*/
    *zoom:1;/* for IE7*/
    min-width:100px;
    min-height:50px;
    margin-right:10px;
    background:red;
    white-space:normal;
}
.parent{
    white-space:nowrap;
}

http://jsfiddle.net/QdvFp/1/

You can achieve with the combination of white-space & display:inline-block like this:

HTML:

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">2</div>
</div>

CSS:

.child{
    display:inline-block;
    *display:inline; /* for IE7*/
    *zoom:1;/* for IE7*/
    min-width:100px;
    min-height:50px;
    margin-right:10px;
    background:red;
    white-space:normal;
}
.parent{
    white-space:nowrap;
}