我是新来的。我正在学习网页设计,尤其是 css。 现在我有一个问题,我需要在 div 的同一个地方摆姿势,一个包含菜单和另一个带有类似文本的图像。
我需要在侧边菜单后面放置侧边信息
#sidemenu {
float: left;
width: 300px;
}
#sidemenu ul {
line-height: 50px;
}
#sidemenu ul li {
border-bottom: solid 1px black;
}
.side-info {
width: 650px;
padding-left: 50px;
}
.side-info img {
margin-left: 5px;
}
<div id="sidemenu">
<ul>
<li><a href="#">Brand Creation</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Web Design & development</a></li>
<li><a href="#">Packing Design</a></li>
</ul>
</div>
<div class="side-info"> <img src="images/template5_12.jpg" alt="computer">
<p class="com">Web Site & Apps</p>
<h2>Meddison Architecture</h2>
<p class="par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultrices quam at orci aliquet, sollicitudin iaculis felis vehicula. Proin id nisl nec nisl feugiat egestas at eu odio</p>
<p class="linkto">View Project</p>
</div>
最佳答案
ul, li {margin:0;}
#wrapper {width:1000px;}
#sidemenu {
float: left;
width: 300px;
}
#sidemenu ul li{
padding-top: 10px;
padding-bottom:10px;
}
#sidemenu ul li {
border-bottom: solid 1px black;
}
.side-info {
width: 650px;
padding-left: 50px;
float:right;
}
.side-info img {
margin-left: 5px;
}
<div id="wrapper">
<div id="sidemenu">
<ul>
<li><a href="#">Brand Creation</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Web Design & development</a></li>
<li><a href="#">Packing Design</a></li>
</ul>
</div>
<div class="side-info"> <img src="https://via.placeholder.com/140x100" alt="computer">
<p class="com">Web Site & Apps</p>
<h2>Meddison Architecture</h2>
<p class="par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultrices quam at orci aliquet, sollicitudin iaculis felis vehicula. Proin id nisl nec nisl feugiat egestas at eu odio</p>
<p class="linkto">View Project</p>
</div>
</div>
Dany,我建议你从 Bootstrap 开始最流行的前端框架之一。它具有满足您要求的所有必要 CSS,而且很简单。根据我对您的问题的理解,您可以使用零自定义 CSS 实现。
关于html - 向左浮动的CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54026751/