다른 div 내에서 두 div를 가로로 배치하는 방법
나는 CSS를 너무 오랫동안 사용하지 않았으며 현재 참조가 없습니다. 내 질문은 상당히 쉬울 것이지만 인터넷 검색은 충분한 답변을 제공하지 않습니다. 그래서, 집단적 지식을 더하면 ...
|#header---------------------------------------------------------------|
| TITLE |
|#sub-title------------------------------------------------------------|
|bread > crumb | username logout |
|#sub-left | #sub-right|
|---------------------------------|------------------------------------|
그것이 제가 원하는 레이아웃입니다. 어쨌든 제목. 부제목에 하위 왼쪽과 하위 오른쪽이 포함되기를 원했습니다. div가 다른 div의 속성에 묶여 있는지 확인하기 위해 어떤 CSS 규칙을 사용합니까? 이 경우 하위 왼쪽 및 하위 오른쪽이 자막 내에 유지되도록하려면 어떻게해야합니까?
clear:both실제로 필요하지 않은 경우 하단에 div 가 필요하다는 것은 매우 일반적인 오해입니다 . foxy의 대답은 정확하지만 의미가없고 쓸모없는 정리 div가 필요하지 않습니다. 당신이해야 할 일은 overflow:hidden용기에 붙이는 것입니다.
#sub-title { overflow:hidden; }
당신이 떠 sub-left있고 sub-right그들은 더 이상 내 공간을 차지하지 않습니다 sub-title. style = "clear: both"포함 div를 확장하려면 그 아래 에 다른 div를 추가해야 합니다. 그렇지 않으면 그 아래에 나타납니다.
HTML :
<div id="sub-title">
<div id="sub-left">
sub-left
</div>
<div id="sub-right">
sub-right
</div>
<div class="clear-both"></div>
</div>
CSS :
#sub-left {
float: left;
}
#sub-right {
float: right;
}
.clear-both {
clear: both;
}
이것은 당신이 찾고있는 것을 수행해야합니다.
<html>
<head>
<style type="text/css">
#header {
text-align: center;
}
#wrapper {
margin:0 auto;
width:600px;
}
#submain {
margin:0 auto;
width:600px;
}
#sub-left {
float:left;
width:300px;
}
#sub-right {
float:right;
width:240px;
text-align: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Head</h1></div>
<div id="sub-main">
<div id="sub-left">
Right
</div>
<div id="sub-right">
Left
</div>
</div>
</div>
</body>
</html>
래퍼 클래스를 사용하여 전체 문서를 제어하거나 하위 기본 클래스를 사용하여 두 열만 제어 할 수 있습니다.
# sub-title에 "overflow : hidden"을 적용하는 것에 대해 Darko Z에 동의합니다. 그러나 너비 또는 높이를 지정하지 않으면 float를 지우는 overflow : hidden 메서드가 IE6에서 작동하지 않는다는 점을 언급해야합니다. 또는 너비 나 높이를 지정하지 않으려면 "zoom : 1"을 사용할 수 있습니다.
#sub-title { overflow:hidden; zoom: 1; }
이 답변은 위의 솔루션에 추가되어 다음과 같은 마지막 문장을 해결합니다.
sub-left 및 sub-right가 자막 내에 유지되도록하려면 어떻게합니까
문제는 하위 왼쪽 또는 하위 오른쪽의 내용이 확장됨에 따라 하위 제목 아래로 확장된다는 것입니다. 이 동작은 CSS로 설계되었지만 우리 대부분에게 문제를 일으 킵니다. 가장 쉬운 해결책은 CSS Clear 선언으로 스타일이 지정된 div를 갖는 것입니다.
이렇게하려면 닫는 div를 정의하는 CSS 문을 포함합니다 (사용 된 Float 선언에 따라 둘 다가 아닌 Clear Left 또는 RIght 일 수 있습니다.
#sub_close {clear:both;}
그리고 HTML은 다음과 같습니다.
<div id="sub-title">
<div id="sub-left">Right</div>
<div id="sub-right">Left</div>
<div id="sub-close"></div>
</div>
죄송합니다.이 글이 이전에 게시되었다는 사실을 깨달았습니다. 답장을 입력하는 동안 커피를 마시면 안됩니다.
@Darko Z : 당신 말이 맞습니다. 제가 찾은 overflow : auto (또는 overflow : hidden) 솔루션에 대한 가장 좋은 설명은 얼마 전 SitePoint의 Simple Clearing of FLoats의 게시물에 있었고 456bereastreet 에도 좋은 설명이 있습니다. 기사 CSS 팁과 트릭 Part-2 . 닫는 div cludge는 물론 매우 우아하지는 않지만 정상적으로 작동하기 때문에 이러한 솔루션을 직접 구현하기에는 너무 게으르다는 것을 인정해야합니다. 그래서 지금부터 제 행동을 정리하기 위해 노력하겠습니다.
진지하게 이들 중 일부를 시도해보십시오. 고정 너비 또는 더 유동적 인 레이아웃을 선택할 수 있습니다. 선택은 귀하의 것입니다! 구현하기도 정말 쉽습니다.
IronMyers 레이아웃
더 더 더
YUI Grids 또는 Blue Print CSS 와 같은 CSS Grids 프레임 워크를 사용하여이를 수행 할 수도 있습니다 . 그들은 크로스 브라우저 문제를 많이 해결하고 단순한 필사자 사용을 위해 더 정교한 열 레이아웃을 가능하게합니다.
css3를 사용한 가장 좋고 간단한 접근 방식
#subtitle{
/*for webkit browsers*/
display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack: center;
width:100%;
}
#subleft,#subright{
width:50%;
}
아마 이런 것 ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#container
{
width:600px;
}
#head, #sub-title
{
width:100%;
}
#sub-left, #sub-right
{
width:50%;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="head">
#head
</div>
<div id="sub-title">
#sub-title
<div id="sub-left">
#sub-left
</div>
<div id="sub-right">
#sub-right
</div>
</div>
</div>
</body>
</html>
overflow:hidden해킹의 일종 인 을 사용하는 대신 단순히 고정 높이 (예 : height:500px상위 부서에)를 설정하지 않는 이유 는 무엇입니까?
#sub-left, #sub-right
{
display: inline-block;
}
Bootstrap Grid를 통해 크로스 브라우저 호환 솔루션을 쉽게 얻을 수 있습니다.
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">
Div1
</div>
<div class="col-sm-6" style="background-color:lavenderblush;">
Div2
</div>
</div>
</div>
jsfiddle : http://jsfiddle.net/DTcHh/4197/
다음과 같이합니다.
<table>
<tr>
<td colspan="2">TITLE</td>
</tr>
<tr>
<td>subleft</td><td>subright</td>
</tr>
</table>
EASY - took me 1 minute to type it. Remember the CSS file needs to be downloaded to the client, so don't worry about the waffle about extra tags, its irrelavent in this instance.
ReferenceURL : https://stackoverflow.com/questions/323599/how-to-position-two-divs-horizontally-within-another-div
'Development Tip' 카테고리의 다른 글
| Kotlin에서 "수신자"는 무엇입니까? (0) | 2020.12.29 |
|---|---|
| Dockerfile에서 WORKDIR의 요점은 무엇입니까? (0) | 2020.12.29 |
| Xcode : 소스 코드를 직접 수정하는 모든 빌드 전에 스크립트 실행 (0) | 2020.12.29 |
| Document 개체에서 Window 개체를 가져 오는 방법은 무엇입니까? (0) | 2020.12.29 |
| DROP… CREATE 대 ALTER (0) | 2020.12.29 |