두 개의 float div를 내부로 감싸기 위해 div를 만드는 방법은 무엇입니까?
일반적인 문제인지는 모르겠지만 지금까지 웹에서 해결책을 찾을 수 없습니다. 두 개의 div를 다른 div 안에 래핑하고 싶지만이 두 div는 동일한 레벨로 정렬되어야합니다 (예 : 왼쪽은 래핑 된 Div의 20 % 너비, 오른쪽은 다른 80 %). 이 목적을 달성하기 위해 다음 예제 CSS를 사용했습니다. 그러나 이제 랩 DIV는 해당 div를 모두 랩핑하지 않았습니다. 랩 Div는 내부에 포함 된 두 div보다 높이가 작습니다. 랩 Div의 높이가 포함 된 div만큼 가장 큰지 어떻게 확인할 수 있습니까? 감사!!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>liquid test</title>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
height:100%;
}
#nav
{
float: left;
width: 25%;
height: 150px;
background-color: #999;
margin-bottom: 10px;
}
#content
{
float: left;
margin-left: 1%;
width: 65%;
height: 150px;
background-color: #999;
margin-bottom: 10px;
}
#wrap
{
background-color:#DDD;
height:100%;
}
</style>
</head>
<body>
<div id="wrap">
<h1>wrap1 </h1>
<div id="nav"></div>
<div id="content"><a href="index.htm">< Back to article</a></div>
</div>
</body>
</html>
블록 안에 두 개의 수레가있는 경우 일반적인 문제입니다. 그것을 고치는 가장 좋은 방법은 clear:both두 번째 div.
<div style="display: block; clear: both;"></div>
컨테이너가 올바른 높이가되도록해야합니다.
clear: both해킹 외에도 추가 요소를 건너 뛰고 overflow: hidden래핑에 사용할 수 있습니다 div.
<div style="overflow: hidden;">
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>
이렇게해야합니다.
<div id="wrap">
<div id="nav"></div>
<div id="content"></div>
<div style="clear:both"></div>
</div>
overflow:hidden (@Mikael S에서 언급했듯이) 모든 상황에서 작동하지는 않지만 대부분의 상황에서 작동합니다.
또 다른 옵션은 :after트릭 을 사용하는 것 입니다.
<div class="wrapper">
<div class="col"></div>
<div class="col"></div>
</div>
.wrapper {
min-height: 1px; /* Required for IE7 */
}
.wrapper:after {
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
content: ".";
font-size: 0;
}
.col {
display: inline;
float: left;
}
그리고 IE6의 경우 :
.wrapper { height: 1px; }
모든 것을 떠 다니십시오.
부동이 div아닌 내부 에 부동이 있으면 div모든 것이 나사산됩니다. 이것이 Blueprint 및 960.gs와 같은 대부분의 CSS 프레임 워크가 모두 부동 컨테이너 및 divs.
특정 질문에 답하려면
<div class="container">
<!--
.container {
float: left;
width: 100%;
}
-->
<div class="sidebar">
<!--
.sidebar {
float: left;
width: 20%;
height: auto;
}
-->
</div>
<div class="content">
<!--
.sidebar {
float: left;
width: 20%;
height: auto;
}
-->
</div>
</div>
당신의 float:left;모든 것만 큼 잘 작동 합니다 <div>.
이 CSS 해킹을 사용하면 많은 수고와 시간을 절약 할 수있었습니다.
나는 모든 프로젝트에서 그것을 사용합니다.
Here's another, I found helpful. It works even for Responsive CSS design too.
#wrap
{
display: table;
table-layout: fixed; /* it'll enable the div to be responsive */
width: 100%; /* as display table will shrink the div to content-wide */
}
WARNING: But this theory won't work for holder contains inner elements with absolute positions. And it will create problem for fixed-width layout. But for responsive design, it's just excellent. :)
ADDITION TO Meep3D's ANSWER
With CSS3, in a dynamic portion, you can add clear float to the last element by:
#wrap [class*='my-div-class']:last-of-type {
display: block;
clear: both;
}
Where your divs are:
<div id="wrap">
<?php for( $i = 0; $i < 3; $i++ ) {
<div class="my-div-class-<?php echo $i ?>>
<p>content</p>
</div> <!-- .my-div-class-<?php echo $i ?> -->
}
</div>
Reference:
Here i show you a snippet where your problem is solved (i know, it's been too long since you posted it, but i think this is cleaner than de "clear" fix)
#nav
{
float: left;
width: 25%;
height: 150px;
background-color: #999;
margin-bottom: 10px;
}
#content
{
float: left;
margin-left: 1%;
width: 65%;
height: 150px;
background-color: #999;
margin-bottom: 10px;
}
#wrap
{
background-color:#DDD;
overflow: hidden
} <div id="wrap">
<h1>wrap1 </h1>
<div id="nav"></div>
<div id="content"><a href="index.htm">< Back to article</a></div>
</div>Instead of using overflow:hidden, which is a kind of hack, why not simply setting a fixed height, e.g. height:500px, to the parent division?
<html>
<head>
<style>
#main { border: 1px #000 solid; width: 600px; height: 400px; margin: auto;}
#one { width: 20%; height: 100%; background-color: blue; display: inline-block; }
#two { width: 80%; height: 100%; background-color: red; display: inline-block; }
</style>
</head>
<body>
<div id="main">
<span id="one">one</span><span id="two">two</span>
</div>
</body>
</html>
The secret is the inline-block. If you use borders or margins, you may need to reduce the width of the div that use them.
NOTE: This doesn't work properly in IE6/7 if you use "DIV" instead of "SPAN". (see http://www.quirksmode.org/css/display.html)
HTML
<div id="wrapper">
<div id="nav"></div>
<div id="content"></div>
<div class="clearFloat"></div>
</div>
CSS
.clearFloat {
font-size: 0px;
line-height: 0px;
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
}
참고URL : https://stackoverflow.com/questions/1844207/how-to-make-a-div-to-wrap-two-float-divs-inside
'development' 카테고리의 다른 글
| 파일 경로에서 비트 맵 / 드로어 블 만들기 (0) | 2020.10.25 |
|---|---|
| jQuery를 사용하여 테이블 행을 뷰 (element.scrollintoView)로 스크롤하려면 어떻게해야합니까? (0) | 2020.10.25 |
| PHP-특정 문자열로 시작하는 배열에서 모든 키 가져 오기 (0) | 2020.10.25 |
| 슬라이스 된 "스크린"터미널에서 위아래로 스크롤하는 방법 (0) | 2020.10.25 |
| Golang에서 Mkdir을 사용하여 중첩 된 디렉토리를 만드는 방법은 무엇입니까? (0) | 2020.10.25 |