좋아, 내가 필요한 것을 분명히 할 수 있기를 바랍니다.
래퍼, div 1, div 2, div 3 및 div 4의 5 개의 Div가 있습니다.
HTML :
<div id="main">
<div id="one">1</div>
<div id="two">2
<div id="four">4</div>
</div>
<div id="three">3</div>
</div>
CSS :
#main{
height:200px;
border: 1px solid red;
float:left;
}
#one{
min-width:100px;
max-width:200px;
background-color:#cccccc;
height:100%;
float:left;
}
#two{
width:50px;
height: 50px;
background-color:#ccffff;
float:left;
}
#three{
min-width:100px;
max-width:200px;
background-color:orange;
height:100%;
float:left;
}
#four{
min-width:52px;
max-width:200px;
background-color:pink;
}
Div 4는 상위 div 2에 포함되어 있습니다. Div 4는 div 2보다 커지더라도 항상 div 2의 중앙에 위치해야합니다.
이것을하는 방법. 이 순간 div4는 항상 div2에 있습니다. 플로트, 위치 및 여백을 가지고 놀았지만 div 4 너비가 동적이기 때문에 결코 가운데로 만들 수 없습니다.
div 4에 텍스트를 입력했다고 가정하고 다음과 같이 표시하고 싶습니다.
_______________
| 1 |2 | 3 |
| __|___|___ |
| |div4 txt| |
| |________| |
|____|___|_____|
이 걸작이 분명해 졌으면합니다. Div4는 텍스트에 따라 더 크거나 작을 수 있습니다.
div2와 div4를 새 래퍼에 넣는 것이 더 쉬우면 나도 괜찮지 만 div 1과 div 2는 항상 div 2에 "연결"되어야합니다 (또한 시도했지만 결과적으로 div 1과 div 3이 div2 제외)
나는 또한 시도했다 :
누군가가 도울 수 있기를 바랍니다.
ps 또한 div 1과 3이 항상 표시되는 것은 아닙니다. ! 숨길 수 있고, 3은 숨길 수 있지만 둘 다 숨길 수도 있습니다.
절대 위치를 사용해야한다고 생각합니다.
#four{
min-width:52px;
max-width:200px;
width: 200px;
background-color:pink;
position: absolute;
top: 50%;
left: calc(50% - 100px)
}
이 바이올린을보십시오 : http://jsfiddle.net/5dh66t14/
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다