如何让两个元素并排浮动，使其与顶部的横幅对齐？

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%;

下面是代码的链接：http://codepen.io/Pea92/pen/JdpoqN

Answer 1

只需将右列向右浮动即可

.rightcolumn {

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

在这里添加这个(去掉宽度)

.topbanner {

  background-color:black;
  padding:1%;
  margin-top:1%;
}

view my fiddle

Answer 2

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

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

你只需要将.woman (图片)向右浮动，也许可以将左边距减少到3%。

看起来左栏和图片的宽度之和应该达到99%，但由于左栏和图片的边框为3px，可能已经超过了100%。