html - 我网页上两个元素之间的 CSS 对齐

Question

我的页面上有两个元素，我希望并排对齐，最好的方法是什么，有人可以解释一下当您想将元素对齐在一起时编写代码的最佳方法。

在这个例子中，我希望视频占据房间的大部分空间，比如 3/4，而图表占据剩余的 1/4。 (Bootstrap 在此页面加载)

有什么建议吗？这是它目前的样子:

http://i1057.photobucket.com/albums/t390/Alexwileyy/element_zps066ecdd2.png(我已经用颜色勾勒出视频的轮廓，这样我就可以看到周边)

这是我的两个元素的 HTML 代码:

<!--Video Section-->
<div class="video">
<div class="container">
    <div class="video-element">
        <iframe width="460" height="215" src="//www.youtube.com/embed/PdABTJhRTLY" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
</div>
<!--End Of Video Section-->

<!--Start of chart-->
<div class="container">
<div class="chart">
<div class="chart-cont">
<h1 id="chart-header">Charts</h1>
</div>
<div class="chart-cont">
    <h1>1</h1>
    <img src="http://www.spotlightreport.net/wp-content/uploads/2013/06/gran-tourismo-6-banner-3.jpg">
    <a href="#" class="view-review">View Review</a></td>
</div>
<div class="chart-cont">
    <h1>2</h1>
    <img src="http://savegameonline.com/wp-content/uploads/2013/05/CoD-Ghosts-banner.png">
    <a href="#" class="view-review">View Review</a></td>
</div>
<div class="chart-cont">
    <h1>3</h1>
    <img src="http://bit.ly/1tSu4iq">
    <a href="#" class="view-review">View Review</a></td>
</div>
<div class="chart-cont">
    <h1>4</h1>
    <img src="http://www.spotlightreport.net/wp-content/uploads/2013/06/gran-tourismo-6-banner-3.jpg">
    <a href="#" class="view-review">View Review</a></td>
</div>
<div class="chart-cont">
<a href="#"><h4>View More..</h4></a>
</div>
</div>

</div>
<!--End of chart-->

这是我的两个元素的 CSS 代码:

.chart {
background-color:white;
width:400px;

margin-bottom:10px;
margin-top:-35px;
}
.chart-cont * {
display:inline;
}
.chart-cont {
padding:10px;
box-shadow: 0 2px 5px rgba(26,26,26,0.75);
text-align:center;
}
.chart-cont img {
width:180;
height:60px;
}
.chart-cont h1 {
vertical-align:middle;
}

任何答案非常表示感谢。

Answer 1

首先，如果您想使用 3/4 的屏幕，请开始使用百分比作为宽度。

首先创建一个内容 Div，然后创建一个 LeftContent 和一个 RightContent div。

像这样:

<div class="Content">
    <div class="LeftContent">

    </div>

    <div class="RightContent">

    </div>
 </div>

CSS:

.Content{
 width:100%;
margin:10px;
padding:10px;    

}
.LeftContent{
width:60%;
margin:10px;
float:left;
}

.RightContent{
width:30%;
margin:10px;
float:right;
}

现在您可以将视频放在左侧，将其他图像放在右侧，调整填充、边距和宽度百分比，并通过缩小窗口进行测试(在较小的屏幕上看起来如何)。注意使用向左浮动和向右浮动。这是 JSFiddle 链接:http://fiddle.jshell.net/7pp7q/1/