如何水平对齐我的元素以进行平板电脑布局？
Posted
技术标签:
【中文标题】如何水平对齐我的元素以进行平板电脑布局？【英文标题】：How to horizontally align my elements for tablet layout? 【发布时间】：2017-03-22 18:13:26 【问题描述】：我想为不同的浏览器宽度（即台式机、平板电脑、手机）设置三种不同的网页布局。 在平板电脑布局中（浏览器的 768px 和 991px 之间）我应该有三个元素，第一行两个（因此每个占浏览器宽度的 6/12）和第二行第三个（占 12/ 12 的浏览器宽度）。 这就是我要的： What I want - IMAGE 但我对这种布局有疑问： 如您所见，我无法将第三个元素的边框设置为与第一个和第二个元素的左右边框对齐。 这就是我所做的： What I have - IMAGE 你能帮助我吗？ 注意：我希望元素 '3' 宽度为 '1'+'2' 宽度仅适用于平板电脑布局！对于其他布局，我想要我已经做过的，即每个元素（1,2 或 3）的宽度相同。
这是html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Our Menu</title>
<link rel ="stylesheet" href="css/style.css">
</head>
<body>
<h1>Our Menu</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sd-12 anchor">
<p class="content"> In girum imus nocte et consimur igni.</p>
<p class="my-title" id="p1"> Chicken</p>
</div>
<div class="col-lg-4 col-md-6 col-sd-12 anchor">
<p class="content"> In girum imus nocte et consimur igni.</p>
<p class="my-title" id="p2"> Beef</p>
</div>
<div class="col-lg-4 col-md-12 col-sd-12 anchor">
<p class="content"> In girum imus nocte et consimur igni.</p>
<p class="my-title" id="p3"> Sushi</p>
</div>
</div>
</body>
</html>
这是css：
/* width and height will include border and padding */
*
box-sizing: border-box;
h1
margin-bottom: 15px;
text-align: center;
/*Set an anchor for the container of p elements*/
div.anchor
position: relative;
#p1
background-color: yellow;
#p2
background-color: #ff0000;
#p3
background-color: #ffaabb;
/*.col-md-12 .content
margin-right: 2.5%;
margin-left: 2.5%;
*/
p.content
border: 1px solid black;
background-color: #a3d3d3;
/*width: 90%; /*Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.*/
height: 150px;
margin-right: 5%;
margin-left: 5%;
font-family: Helvetica;
color: white;
padding: 20px;
p.my-title
position: absolute;
top: 0px;
right: 0px;
width: 80px;
height: 20px;
margin: 0px;
border: 1px solid black;
text-align: center;
margin-right: 5%;/*inherit; 22.525px; inherit*/
margin-top: 16px;
/*margin-right: auto;
margin-left: auto;
font-family: Helvetica;*/
color: black;
/* Simple Responsive Framework. */
.row
width: 100%;
/********** desktop devices only **********/
@media (min-width: 992px)
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4
float: left;
.col-lg-1
width: 8.33%;
.col-lg-2
width: 16.66%;
.col-lg-3
width: 25%;
.col-lg-4
width: 33.33%;
/********** Tablet devices only **********/
@media (min-width: 768px) and (max-width: 991px)
.col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-12
float: left;
.col-md-4
width: 33.33%;
.col-md-5
width: 41.66%;
.col-md-6
width: 50%;
.col-md-7
width: 58.33%;
.col-md-8
width: 66.66%;
.col-md-12
width: 100%;
/*margin-right: -5.5%;
margin-left: -2.8%;*/
/********** mobile devices only **********/
/* the floating is only defined inside the media queries.
The elements will behave just like regular block level elements,
and they will automatically stack one on top of the other.
Anyway, it's better to explicit define the media query also for
mobile phones. */
@media (max-width: 767px)
.col-sd-9, .col-sd-10, .col-sd-11, .col-sd-12
float: left;
.col-sd-9
width: 74.99%;
.col-sd-10
width: 83.33%;
.col-sd-11
width: 91.66%;
.col-sd-12
width: 100%;
谢谢！
【问题讨论】：
问题在于你的百分比边际你的数学没有加起来。在你的上排你有 5% 的边距在两个元素上左右 4 倍，在下排你有 5% 的边距 2 倍。那个元素的左右 【参考方案1】：检查这个fiddle
div.anchor
position: relative;
padding: 0 15px;
p.content
border: 1px solid black;
background-color: #a3d3d3;
/*width: 90%; /*Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.*/
height: 150px;
/* margin-right: 5%;
margin-left: 5%; */
font-family: Helvetica;
color: white;
padding: 20px;
p.my-title
position: absolute;
top: 16px;
right: 15px;
width: 80px;
height: 20px;
margin: 0px;
border: 1px solid black;
text-align: center;
/* margin-right: 5%;inherit; 22.525px; inherit
margin-top: 16px; */
/*margin-right: auto;
margin-left: auto;
font-family: Helvetica;*/
color: black;
编辑：
在p.content 和p.my-title 上删除了左右边距，在div.anchor 和top 和right 上添加了padding 在p.my-title 上的位置
【讨论】：
以上是关于如何水平对齐我的元素以进行平板电脑布局？的主要内容，如果未能解决你的问题，请参考以下文章