콘텐츠가없는 DIV에 너비가있는 방법은 무엇입니까?
DIV에 너비를 추가하려고하는데 내용이 없기 때문에 문제가 발생한 것 같습니다. 지금까지 내가 가지고있는 CSS와 HTML이 있지만 작동하지 않습니다.
CSS
body{
margin:0 auto;
width:1000px
}
ul{
width:800px;
}
ul li{
clear:both;
}
.test1{
width:200px;
float:left;
}
HTML
<body>
<div id="test">
<ul>
<li>
<div class="test1">width1</div>
<div class="test1">width2</div>
<div class="test1">width3</div>
</li>
<li>
<div class="test1"></div>
<div class="test1">width2</div>
<div class="test1">width3</div>
</li>
<li>
<div class="test1"></div>
<div class="test1">width2</div>
<div class="test1">width3</div>
</li>
</ul>
</div>
div는 일반적으로 너비를 갖기 위해 적어도 끊기지 않는 공백 (& nbsp;)이 필요합니다.
하나를 사용 padding, height또는  폭이 비어로 적용하기div
편집하다:
0이 아닌 min-height것도 잘 작동합니다.
Use min-height: 1px;Everything은 최소 높이가 1px 이상이므로 nbsp 또는 padding으로 추가 공간을 차지하지 않거나 높이를 먼저 알아야합니다.
CSS를 사용하여 div에 너비가 0 인 공간을 추가합니다. div의 내용은 공간을 차지하지 않지만 div가 표시되도록 강제합니다.
.test1::before{
content: "\200B";
}
너비는 있지만 내용이나 높이는 없습니다. test1 클래스에 높이 속성을 추가하십시오.
There are different methods to make the empty DIV with float: left or float: right visible.
Here presents the ones I know:
- set
width(ormin-width) withheight(ormin-height) - or set
padding-top - or set
padding-bottom - or set
border-top - or set
border-bottom - or use pseudo-elements:
::beforeor::afterwith:{content: "\200B";}- or
{content: "."; visibility: hidden;}
- or put
inside DIV (this sometimes can bring unexpected effects eg. in combination withtext-decoration: underline;)
Try to add display:block; to your test1
Too late to answer, but nevertheless.
While using CSS, to style the div (content-less), the min-height property must be set to "n"px to make the div visible (works with webkits and chrome, while not sure if this trick will work on IE6 and lower)
Code:
.shape-round{
width: 40px;
min-height: 40px;
background: #FF0000;
border-radius: 50%;
}<div class="shape-round"></div>  may do the trick; works in XSL docs
You add to this DIV's CSS position: relative, it will do all the work.
참고URL : https://stackoverflow.com/questions/4171286/how-to-make-a-div-with-no-content-have-a-width
'programing' 카테고리의 다른 글
| POST 요청을 JSON으로 보내려면 어떻게해야합니까? (0) | 2020.08.24 |
|---|---|
| 목록 변환 (0) | 2020.08.24 |
| 파이썬에서 셀레늄 웹 드라이버를 사용하여 웹 페이지를 어떻게 스크롤 할 수 있습니까? (0) | 2020.08.24 |
| 테이블 jquery 지우기 (0) | 2020.08.24 |
| `__android_log_print '에 대한 정의되지 않은 참조 (0) | 2020.08.24 |