浮动左侧css答案

【问题标题】：Floating left css浮动左侧css
【发布时间】：2019-01-04 01:37:27
【问题描述】：

我是新来的。我正在学习网页设计，尤其是 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 &amp; 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 &amp; 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>

【问题讨论】：

您可以编辑您的帖子以包含您放入 cmets 的代码。还请添加一些上下文。您绝对不需要包含 CSS 文档的路径，但您确实需要包含您的代码。编辑您的帖子以包含它，而不是 cmets。
你应该更新你的问题而不是在评论中添加代码..你也可以使用问题文本上方的括号按钮来格式化有问题的代码

标签： html css css-float

【解决方案1】：

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 &amp; 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 &amp; 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 来实现。

【讨论】：

你能帮帮我吗？
了解@Paulie_D 修改了回复消息。谢谢