Question

我一直在尝试使用Dreamweaver流体网格系统让两个div居中坐在彼此旁边。我尝试了许多不同的东西让它们居中。我已经接近，玩边缘但是当我拉着窗户来调整浏览器窗口的大小时，我设置的百分比并没有完全锻炼，使div的左边或右边太多或抛出div在桌面和平板电脑屏幕尺寸之间的新线上。我认为问题是左边的div，它在Dreamweaver的设计版面上有一个固定的像素宽度和一些空的网格线空间。我无法在网上找到任何答案.....请有人帮忙。看起来我必须搜索如何正确地将代码放在这里。抱歉...第一次来这里。

jsfiddle

<div class="gridContainer clearfix">
 <div class="fluid header">This is the content for Layout Div Tag "header"</div>
<div class="fluid vid">
   <iframe width="100%" height="200" src="http://www.youtube.com/embed/RZyPHa3gxE0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="fluid img hide_mobile"><img src="Screen shot 2014-05-21 at 12.15.22.png"  alt=""/></div>
<div class="fluid button zeroMargin_desktop">This is the content for Layout Div Tag "button"</div>
<div class="fluid vid">
   <iframe width="100%" height="200" src="http://www.youtube.com/embed/RZyPHa3gxE0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="fluid img hide_mobile"><img src="Screen shot 2014-05-21 at 12.15.22.png"  alt=""/></div>
<div class="fluid button zeroMargin_desktop">This is the content for Layout Div Tag "button"</div>
</div>

Answer 1

添加以下代码：

* {
box-sizing: border-box; /* Opera/IE 8+ */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
}

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing box-sizing CSS属性用于更改用于计算元素宽度和高度的默认CSS框模型。

border-box - 宽度和高度属性包括填充和边框，但不包括边距。

所以，而不是保证金

.img {
margin-left: 2.5641%;
}

使用填充

.img {
padding-left: 2.5641%;
}

你的布局应该没问题。

在Dreamweaver流体网格布局中心两个div

1 个答案: