简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> CSS Tutorial> body text

DL.DT.DD implements a simple example of left and right layout

PHP中文网
Release： 2016-05-16 12:06:39
Original
1696 people have browsed it

this is a question that someone sent an email to ask today. the original idea was to use the ul list to implement it; but there are two troublesome places in this way:
1. if you use ul for layout, the one on the right column is more troublesome;
2. it is troublesome to adapt the borders outside the text;
3. the height may have to be fixed;
so, take a closer look at this layout and think about using dl. dt.dd is reasonable:
1. the layout is more reasonable;
2. it will be easy to expand in the future;
3. there must be very little css;
i tried to write it, it’s okay to take a look! within control!
of course it goes without saying about layout distribution:

标题
Copy after login

css part:

Copy after login

look at the effect:

     

  
test
  
test
Copy after login

what if we say fixed width?

     

  
标题
  
标题
Copy after login

for a related example, i have written one before:

      

  
 
 
 DL.DT.DD implements a simple example of left and right layout 
 
母亲节-祝福短信
 
 
 
 DL.DT.DD implements a simple example of left and right layout 
 
母亲节-祝福短信
 
 
 
 DL.DT.DD implements a simple example of left and right layout 
 
母亲节-祝福短信
 
 
 
 DL.DT.DD implements a simple example of left and right layout 
 
母亲节-祝福短信
 
 
 
 DL.DT.DD implements a simple example of left and right layout 
 
母亲节-祝福短信
Copy after login
Related labels：
dd
source：php.cn
Previous article：How to use iframe margin to call a certain area of other web pages_Experience exchange Next article：Summary of the differences between Div CSS absolute and relative_Experience exchange
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Do I need to include html, head and body tags when creating HTML emails? In my email views I usually just do something like
Name
<...
From 2023-10-17 16:56:57
0
1
265
HTML assign variable to element name Is there a way to assign a variable to the element name so that I can access the element a...
From 2023-09-09 20:57:07
0
2
256
Win10 system php installs swoole extension https://my.oschina.net/u/4884318/blog/4838433 Refer to the above post. After compiling and...
From 2021-07-20 20:08:31
0
1
951
Prompt closing tag does not match
From 2019-04-29 11:06:41
0
0
836
android plug-in framework There are too many plug-in frameworks related to Android, including Ctrip DynamicAPK, 360,...
From 2017-06-21 10:12:29
0
1
635
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！