html - 如何让 2 个元素并排 float ，与顶部的横幅对齐？

Question

我正在构建一个简单的网站布局。我在顶部有一个横幅，下面有一个 div 框和一个图像，它们都向左浮动。我想让女人的形象与标题横幅的右侧对齐。我试过使用边距，但它要么离开页面，要么不完全对齐。

这是 CSS:

.topbanner {
width:100%;
background-color:black;
padding:1%;
margin-top:1%;
}

#nav {
text-align:center;

}

.leftcolumn {
width:40%;
height:230px;
background-color: grey;
border: solid red 3px;
margin-top:2%;
float:left;

}

.leftcolumn p {
color:white;
text-align:center;
padding:13%;
font-style:italic;
font-size:20px;
}

.woman {
width:55%;
height:230px;
border: solid black 3px;
margin-top:2%;
float:left;
margin-left:4%;

这是codepen的链接: http://codepen.io/Pea92/pen/JdpoqN

Answer 1

在这里，我为您编辑了 CSS。

.woman {
  width: 55%;
  height: 230px;
  border: solid black 3px;
  margin-top: 2%;
  float: right;
  margin-left: 3%;
}

你只需要将 .woman (image) 向右浮动，然后将 margin-left 减少到 3%。

看起来左列和图像的宽度加起来应该是 99%，但由于左列和图像的 3px 边框，它可能超过了 100%。