【发布时间】：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 倍。那个元素的左右
标签： css responsive-design media-queries width margin