태블릿 레이아웃을위한 요소를 가로로 정렬하는 방법은 무엇입니까?

다른 브라우저 너비 (예 : 데스크톱, 태블릿, 휴대 전화)에 대해 내 웹 페이지 레이아웃을 3 가지로 변경하고 싶습니다. 태블릿 레이아웃 (브라우저의 768px와 991px 사이)에는 첫 번째 행에 두 개 (브라우저 폭의 6/12를 차지함) 세 번째 요소가 있어야하고 두 번째 행에는 세 번째 요소가 있어야합니다 (12/브라우저 너비의 12). 이것은 내가 원하는 것입니다 : What I want - IMAGE 그러나이 레이아웃에 문제가 있습니다. 첫 번째와 두 번째 요소의 왼쪽 및 오른쪽 테두리에 정렬 된 세 번째 요소 테두리를 설정할 수 없습니다. 이것은 내가 한 것입니다. What I have - IMAGE 도와 주시겠습니까? 참고 : 요소 '3'을 너비가 '1'+ '2'너비로만 레이아웃하고 싶습니다. 다른 레이아웃의 경우 이미 수행했던 것, 즉 모든 요소 (1,2 또는 3)에 대해 동일한 너비를 원합니다.태블릿 레이아웃을위한 요소를 가로로 정렬하는 방법은 무엇입니까?

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

감사합니다 :

<!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입니다 :

이는 HTML입니다!

출처

2016-11-08 roberto

문제는 당신의 비율 마진 수학 함께에 div.anchor 및 top 및 right 위치에 padding 추가 합산하지 않습니다. 상단 행에 5 % 여백이 4 번 남았습니다. 두 요소 모두 왼쪽과 오른쪽에 모두 이고 아래 줄에는 5 % 여백이 2 번 있습니다. 하나의 요소에 대해 왼쪽과 오른쪽 –

확인이 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에 왼쪽과 오른쪽은 p.my-title

출처

2016-11-09 00:51:57 GvM

태블릿 레이아웃을위한 요소를 가로로 정렬하는 방법은 무엇입니까?

답변

관련 문제