집 >웹 프론트엔드 >CSS 튜토리얼 >여백 및 오버플로 속성을 사용하여 div 간격을 구현하는 방법_경험 교환

여백 및 오버플로 속성을 사용하여 div 간격을 구현하는 방법_경험 교환

PHP中文网원래의: 2016-05-16 12:06:362117검색

div 간격을 달성하기 위해 여백 및 오버플로 속성을 사용하는 방법_경험 교환

보통 위 그림을 만들 때 각 p에 4개씩 제공합니다. 중간 간격을 달성하기 위해 다른 CSS 속성이 추가되었습니다. 하지만 우리가 더 바라는 것은 HTML 태그를 표시할 필요가 없으며 CSS를 통해 직접 실현할 수 있다는 것입니다. Xiaozhi는 오늘 포럼에서 매우 좋은 솔루션을 제안했습니다. Overflow:hidden 속성을 사용하세요. 아마 많은 분들이 이미 이런 방법을 사용해 보신 것 같은데 저는 한번도 사용해본 적이 없고 신선하네요. 헤헤. 사실 그 이유는 매우 간단합니다. li의 margin-right 및 margin-bottom 속성을 정상적으로 설정하면 결과는 자연스럽게 예상보다 오른쪽과 아래쪽이 됩니다. 이때 부모를 통해 width/를 설정합니다. ul.height 속성을 지정한 다음 초과분을 숨기기 위해 Overflow:Hidden을 사용합니다. 좋은 방법이네요, 하하!

해결 방법은 사진을 참조하세요.
여백 및 오버플로 속성을 사용하여 div 간격을 구현하는 방법_경험 교환

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
        <meta http-equiv="Content-Language" content="zh-CN" /> 
        <meta name="robots" content="all" /> 
        <meta name="author" content="" /> 
        <meta name="Copyright" content="CopyRight 2007" /> 
        <meta name="keywords" content="CSS,overflow属性" /> 
        <meta name="description" content="巧用overflow:hidden解决中间间隔问题" /> 

        <title>巧用overflow:hidden解决中间间隔问题</title> 
        <style type="text/css"> 
            *{margin:0;padding:0;} 
            body{text-align:center;background:#CCC;} 
            ul{list-style:none;} 
            .main {background:white;height:800px;width:597px;margin:0 auto;} 
            .box {width:595px;height:205px;margin:20px auto;overflow:hidden;background:white;} 
            .box ul {width:600px;height:210px;} 
            .box li {float:left;margin-right:5px;margin-bottom:5px;} 
            .box div {background:white;background:#f7f7f7;width:293px;height:98px;border:1px solid #CCC} 
        .box h2 {background:#9CC;text-align:left;text-indent:10px;font-size:12px;height:24px;line-height:24px;} 
        </style> 
    </head> 
    <body> 
        <div> 
            <h1>巧用overflow:hidden解决中间间隔问题</h1> 
            <div> 

                <ul> 
                    <li> 
                        <div> 
                            <h2>Title</h2> 
                            <p>Content</p> 
                        </div> 
                    </li> 
                    <li> 

                        <div> 
                            <h2>Title</h2> 
                            <p>Content</p> 
                        </div> 
                    </li> 
                    <li> 
                        <div> 
                            <h2>Title</h2> 

                            <p>Content</p> 
                        </div> 
                    </li> 
                    <li> 
                        <div> 
                            <h2>Title</h2> 
                            <p>Content</p> 

                        </div> 
                    </li> 
                </ul> 
            </div> 
        </div> 
</body> 
</html>

위는 div 간격을 달성하기 위해 margin 및 Overflow 속성을 사용하는 방법입니다. 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 팔로우하세요!

성명：

이전 기사：CSS 작성 시 Border에 대해 주의해야 할 사항 요약다음 기사：CSS 작성 시 Border에 대해 주의해야 할 사항 요약

여백 및 오버플로 속성을 사용하여 div 간격을 구현하는 방법_경험 교환

관련 기사