cari

Rumah >hujung hadapan web >tutorial css >DL.DT.DD melaksanakan contoh mudah susun atur kiri dan kanan

DL.DT.DD melaksanakan contoh mudah susun atur kiri dan kanan

PHP中文网
PHP中文网asal
2016-05-16 12:06:391786semak imbas

Ini adalah soalan yang dihantar oleh seseorang untuk ditanya hari ini. Idea asal ialah menggunakan senarai ul untuk melaksanakannya; tetapi terdapat dua tempat yang menyusahkan dengan cara ini:
1 , lajur kanan Lebih menyusahkan;
2. Menyusahkan untuk menyesuaikan sempadan di luar teks; DT.DD Tulisan itu munasabah:
1. Susun aturnya lebih munasabah
2. Ia akan lebih mudah untuk dikembangkan pada masa hadapan
3 cuba menulisnya dan lihat jika ia berfungsi! Dalam kawalan!
Sudah tentu ia tidak perlu diperkatakan tentang pengedaran susun atur:


Bahagian 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>

Lihat kesannya: 

<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>

Bagaimana jika anda kata lebar tetap? 

<!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>

Contoh yang berkaitan, saya pernah menulis satu sebelum ini: 

<!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>
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Cara menggunakan margin iframe untuk memanggil kawasan tertentu halaman web lain_Experience exchangeArtikel seterusnya：Cara menggunakan margin iframe untuk memanggil kawasan tertentu halaman web lain_Experience exchange

Artikel berkaitan

Lihat lagi