Question

我正在建立一个简单的网站布局。我顶部有一个横幅，下面有一个div boxe和一个图像，两个都浮在左边。我希望得到女人的形象与标题横幅的右侧内联。我尝试使用保证金，但要么让它离开页面，要么它没有完全对齐。

这里是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

向右浮动右栏

.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％。

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

2 个答案: