3 개의 섹션이 있는데 세로 모드에서는 섹션 2가 하단에, 섹션 1과 3이 함께 정렬되어야하며 가로 모드에서는 3 개 섹션이 모두 함께 정렬되어야합니다.
IE9 브라우저도 지원해야하므로 디스플레이 플렉스 속성을 사용하지 않습니다. 또한 동일한 높이를 유지해야하며 CSS에서 테이블 셀 속성을 사용하고 있습니다.
이것이 내가 시도한 것입니다.
.container{
width: 100%;
border: 1px solid red;
display: table;
}
.section{
display: table-cell;
height: 50px;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
.section:nth-child(1), .section:nth-child(3){
width: 30%;
}<div class="container">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
</div>한 가지 가능한 해결책은 position: absolute다음 예와 같이 섹션 1과 3 모두에서 너비를 50 %로 설정하고 섹션 2에서 a 를 설정하는 것 입니다.
.container{
width: 100%;
border: 1px solid red;
display: table;
}
.section{
display: table-cell;
height: 50px;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
.section:nth-child(1), .section:nth-child(3){
width: 30%;
}
@media screen and (max-width: 600px) {
.section:nth-of-type(2) {
position: absolute;
top: 100px;
left: 45%;
}
.section:nth-of-type(1), .section:nth-of-type(3) {
width: 50%;
}
}<div class="container">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
</div>여기에 이것을 보여주는 JSFiddle도 만들었습니다 .
도움이 되었기를 바랍니다! :)
수정 :
이 작업을 수행하는 훨씬 더 간단한 방법은 대신 섹션 3을 표시하는 것입니다 (또는 가로보기에서 오른쪽에있는 섹션). 이렇게하면 디스플레이를 훨씬 더 많이 제어 할 수 있으며 여러 컨테이너로 작업 할 수도 있습니다.
.container{
width: 100%;
border: 1px solid red;
display: table;
}
.section{
display: table-cell;
height: 50px;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
.section:nth-child(1), .section:nth-child(3){
width: 30%;
}
@media screen and (max-width: 600px) {
.container {
margin-bottom: 20px;
}
.section {
display: block;
float: left;
}
.section:nth-of-type(1), .section:nth-of-type(2) {
width: calc(50% - 2px);
}
.section:nth-of-type(3) {
width: 100%
}
}<div class="container">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
</div>
<div class="container">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
</div>여기서 핵심 display: block은와 함께 좁은 너비에서를 사용하는 것입니다 float: left. 처음 두 섹션은 너비의 50 % (테두리 너비 빼기)에 불과하므로 서로 옆에 떠 있습니다. 세 번째 섹션은 행 너비의 100 %를 차지합니다.
다시 말하지만 StackOverflow가 너무 넓어서이 미디어 쿼리를 표시 할 수 없기 때문에 여기에 이를 보여주는 두 번째 바이올린을 만들었습니다 .
도움이 되었기를 바랍니다! :)
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다