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

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%;
}

你的布局应该没问题。