文章/答案/技术大牛

发布

社区首页 >问答首页 >如何充分伸展2嵌入式div？

问如何充分伸展2嵌入式div？
EN

Stack Overflow用户

提问于 2013-09-05 00:36:21

回答 3查看 66关注 0票数 1

我怎样才能把两个<div>扩展到50%宽呢？制备了jsFiddle。

HTML

<div class="container">
   <div class="left">left</div>
   <div class="right">right</div>
</div>

CSS

div.container {
   width: 100%;
}

div.left, div.right {
   display:inline;
   width:50%;
}

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-09-05 00:40:41

div.container {
    width: 100%;
    white-space: nowrap;
}
div.left, div.right {
    display: inline-block;
    width: 50%;
}

更新的小提琴

或：

div.container {
    width: 100%;
}
div.left, div.right {
    float: left;
    width: 50%;
}

更新的小提琴

票数 3

Stack Overflow用户

发布于 2013-09-05 00:43:50

有多种方法可以做到这一点。您可以像这样应用css。

div.left, div.right {
    position: relative;
    float:left;
    width:50%;
}

http://jsfiddle.net/cdydq/14/

以下是另一种可能呈现所需结果的方法。

div.container {
    position: relative;
    width: 100%;
}
div.left {
    position: relative;
    width:50%;
}
div.right {
    position: absolute;
    margin-left:50%;
    width:50%;
    top:0
}

http://jsfiddle.net/cdydq/18/

票数 2

Stack Overflow用户

发布于 2013-09-05 00:47:57

一种方法:使用inline-block和box-sizing: border-box (如果有边框，则使用后者)

演示

CSS：

div {
    box-sizing: border-box;
}
div.container{
    width: 100%;
    position: relative;
    border: 1px solid blue;
}

div.left, div.right {
    display:inline-block;
    width:50%;
    border: 1px solid black;
}

HTML：

<div class="container">
    <div class="left">left</div><div class="right">right</div>
</div>

注意:这两个div之间缺乏有目的的空间。两个内联元素之间的空格是有意义的。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18625960

复制

相似问题

问如何充分伸展2嵌入式div？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何充分伸展2嵌入式div？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何充分伸展2嵌入式div？
EN