집 >웹 프론트엔드 >CSS 튜토리얼 >DL.DT.DD는 왼쪽 및 오른쪽 레이아웃의 간단한 예를 구현합니다.

DL.DT.DD는 왼쪽 및 오른쪽 레이아웃의 간단한 예를 구현합니다.

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

오늘 누군가가 보내온 질문입니다. 원래 아이디어는 ul 목록을 사용하여 구현하는 것이었지만 이렇게 하면 두 가지 번거로운 부분이 있습니다.
1. , 오른쪽 열이 더 번거롭습니다.
2. 텍스트 외부의 테두리를 조정하는 것이 번거롭습니다.
3. 높이를 고정해야 할 수도 있습니다.
그러므로 이 레이아웃을 자세히 살펴보고 DL.DT.DD를 사용해 보세요. . 글쓰기가 합리적입니다.
1. 레이아웃이 합리적입니다.
3. CSS가 거의 없어야 합니다. 그리고 좋아 보인다! 통제 가능!
물론 레이아웃 배포에 대해서는 말할 것도 없습니다.

CSS 부분:

<h1>标题</h1>  
<div>  
  <dl>  
    <dt><a href="32">·博客里的文章是我自己写的！</a></dt>  
    <dd>作者：张三</dd>  
  </dl>  
  <dl>  
    <dt><a href="3232">·博客里的文章是我自己写的！</a></dt>  
    <dd>作者：张三</dd>  
  </dl>  
  <dl>  
    <dt><a href="3232">·博客里的文章是我自己写的！</a></dt>  
   <dd>作者：张三</dd>  
  </dl>...........  
</div>

효과 살펴보기:

<style>  
*{ margin:0; padding:0;}  
body{ font-size:12px; line-height:1.8; padding:10px;}  
dl{clear:both; margin-bottom:5px;float:left;}  
dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF}  
dd{ position:absolute; right:5px;}  
h1{clear:both;font-size:14px;}  
</style>

What if 고정폭이라고 하던데요?

<!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=utf-8" /> 
<style> 
*{ margin:0; padding:0;} 
body{ font-size:12px; line-height:1.8; padding:10px;} 
dl{clear:both; margin-bottom:5px;float:left;} 
dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF} 
dd{ position:absolute; right:5px;} 
h1{clear:both;font-size:14px;} 
</style> 
</head> 
<body> 
<h1>test</h1> 
<div> 
  <dl> 
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
</div> 
<h1>test</h1> 
<div> 
  <dl> 
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="#">·我是女生！博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
</div> 
</body> 
</html>

관련 예, 이전에 작성한 적이 있습니다.

<!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=utf-8" /> 
<style> 
*{ margin:0; padding:0;} 
body{ font-size:12px; line-height:1.8; padding:10px;} 
dl{clear:both; margin-bottom:5px;float:left;width:100%} 
dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF} 
dd{ float:right} 
h1{clear:both;font-size:14px;} 
div{ width:500px; float:left;} 
</style> 
</head> 
<body> 
<h1>标题</h1> 
<div> 
  <dl> 
    <dt><a href="32">·博客里的文章是我自己写的！</a></dt> 
    <dd>作者：张三</dd> 
  </dl> 
  <dl> 
    <dt><a href="3232">·博客里的文章是我自己写的！</a></dt> 
    <dd>作者：张三</dd> 
  </dl> 
  <dl> 
    <dt><a href="3232">·博客里的文章是我自己写的！</a></dt> 
   <dd>作者：张三</dd> 
  </dl> 
  <dl> 
    <dt><a href="eeqwewq">·博客里的文章是我自己写的！</a></dt> 
    <dd>作者：张三</dd> 
  </dl> 
  <dl> 
    <dt><a href="ewqewq">·博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="ewqe">·博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="ewqe">·博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
</div> 
<h1>标题</h1> 
<div> 
  <dl> 
    <dt><a href="#">·博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="#">·博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="#">·博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="#">·博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="#">·博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="#">·博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
  <dl> 
    <dt><a href="#">·博客里的文章是我自己写的！</a></dt> 
    <dd>xxx</dd> 
  </dl> 
</div> 
</body> 
</html>

성명：

이전 기사：iframe 마진을 활용해 다른 웹페이지의 특정 영역을 호출하는 방법_체험교류다음 기사：iframe 마진을 활용해 다른 웹페이지의 특정 영역을 호출하는 방법_체험교류

DL.DT.DD는 왼쪽 및 오른쪽 레이아웃의 간단한 예를 구현합니다.

관련 기사