老师，请问怎么把aside里面两块dl搞成平行并排？
来源：2-5 编程练习
大宝的爸爸
2019-11-17 11:29:22
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0 auto;padding: 0;}
section{width: 1200px;height: 1200px;}
samp{color: grey;}
aside{float: left;width:500px;height: 1200px;padding:30px;}
article{float: right;width:500px;height: 1200px;padding:30px;}
h1{margin-bottom: 30px;font-size: 30px;font-weight: bold;}
samp{color: grey;font-size: 30px;}
img{margin-bottom: 30px;}
p{margin-bottom: 30px;}
aside dl{position: relative; margin-bottom: 20px;}
.one dd{position: absolute; top: 10px; left: 20px; color: #fff;}
.two dt{font-weight: bold;text-decoration: underline;}
</style>
</head>
<body>
<section>
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl class="one">
<dt><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dt>
<dd>1</dd>
</dl>
<dl class="two">
<dt>左侧1标题</dt>
<dd>左侧1段落文字</dd>
</dl>
<dl class="one">
<dt><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dt>
<dd>2</dd>
</dl>
<dl class="two">
<dt>左侧2标题</dt>
<dd>左侧2段落文字</dd>
</dl>
<dl class="one">
<dt><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dt>
<dd>3</dd>
</dl>
<dl class="two">
<dt>左侧3标题</dt>
<dd>左侧3段落文字</dd>
</dl>
<dl class="one">
<dt><img src="http://climg.mukewang.com/582e61290001787900500051.png"></dt>
<dd>4</dd>
</dl>
<dl class="two">
<dt>左侧4标题</dt>
<dd>左侧4段落文字</dd>
</dl>
</aside>
<article>
<h1>Recent <samp>Course</samp></h1>
<p>右边第一段文字</p>
<img src="http://climg.mukewang.com/582e61180001ede703300130.jpg">
<p>右边第二段文字</p>
<p>右边第三段文字</p>
</article>
</section>
</body>
</html>
1回答
-
同学你好，可以将两个dl放在一个div盒子中，dl设置左浮动即可。参考修改：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题