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

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

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

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

您只需要将 .woman（图片）向右浮动，或许可以将 margin-left 降低到 3%。

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

Answer 2

右栏向右浮动

.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