[英]CSS variable 2 Column Layout
So I've looked up stuff all over the internet and I can't find the answer I'm looking for. 因此,我在整个Internet上查找了东西,但找不到所需的答案。
I'm just trying to make a 2 column layout for a part in my page with each column being the same width, 50% of the container. 我只是想为页面的一部分制作2列布局,每列的宽度相同,即容器的50%。
Now for some reason when I set both divs to 50% and float:left, the second div wraps underneath. 现在由于某种原因,当我将两个div都设置为50%且float:left时,第二个div环绕在下面。 The closest thing I can get is floating the second div right and making width 49% but I'd like it to be 50% because I want to have them touching.
我能得到的最接近的东西是将第二个div向右浮动,并使宽度为49%,但我希望为50%,因为我想让它们接触。
Here is a demonstration: 这是一个示范:
So what am I doing wrong? 那我在做什么错?
The border widths are set to 1px, so they will be adding an additional 2px to each of the two div
s. 边框宽度设置为1px,因此它们将向两个
div
的每一个添加额外的2px。 Therefore, your content is 4px too wide to fit into that div
. 因此,您的内容太宽4px,无法容纳该
div
。
What you need to do is encase the content of your div
s within another div
, and apply the border to the inner div
. 您需要做的是将
div
的内容包含在另一个div
,并将边框应用于内部div
。 Like seen in this fiddle . 就像在小提琴中看到的那样。
You define border to your DIV's. 您定义DIV的边框 。 Which add width to it for example 5
0% + 2px
. 其中,将其添加宽度例如为5
0% + 2px
。 So, use box-sizing: border-box; 因此,请使用box-sizing:border-box;
Write like this: 这样写:
div#textBooks,
div#info{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
check this http://jsfiddle.net/VbWbc/4/ 检查此http://jsfiddle.net/VbWbc/4/
Note: it's work's till IE8 & above. 注意:直到IE8及更高版本才可以使用。
For all browsers 对于所有浏览器
Check this http://jsfiddle.net/VbWbc/5/ write like this: 检查这个http://jsfiddle.net/VbWbc/5/这样写:
div#info{
width:50%;
border:1px solid black;
background-color:red;
float:left;
}
div#textBooks{
border:1px solid black;
background-color:green;
overflow:hidden;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.