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

我的页面上有两个元素，我想并排排列，最好的方法是什么，有人能解释一下当你想把元素排列在一起时编码的最佳方法吗

在这个例子中，我希望视频占据房间的大部分，比如说3/4，图表占据剩下的1/4。（引导加载在此页面上）

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

（我用彩色勾勒出了视频的轮廓，这样我可以看到周长）

这是我的两个元素的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-->

.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;
}

---

非常感谢您的回答。

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

首先创建一个content Div，然后创建一个LeftContent和一个RightContent Div

像这样：

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

    </div>

    <div class="RightContent">

    </div>
 </div>

现在，您可以将视频放在左侧，将其他图像放在右侧，调整填充、边距和宽度百分比的设置方式，并通过缩小窗口（在较小屏幕上的显示方式）进行测试。 注意使用左浮动和右浮动。

---

这里是JSFIDLE链接：

它解决了您的问题吗？是的，它解决了，我现在对这一点有了更好的理解，谢谢！还有一个问题，你知道视频元素，如果我想让文本在左边对齐，我会怎么做？我尝试过文本对齐，但当设置为“左”时，它会使文本在某个地方消失？下面的代码和图片链接：

。视频{宽度：750px；高度：420px；背景色：黄色；页边距底部：10px；}。视频元素{背景色：蓝色；宽度：460px；页边距顶部：20px；}。视频p{文本对齐：中心；}

HTML

看门狗最近上市了

试着像我一样利用JSFIDLE。-默认情况下，文本向左对齐。下一个问题是视频在一个帧中，因此文本在视频后面。确保在视频下方有另一个DIV，并将文本放在其中，这可能会解决您的问题。您希望“看门狗最近上市”与左侧对齐吗？只需删除文本对齐：右；在视频文本中。然后我尝试了你的小提琴链接，当你把宽度设置为100%时，它会像应该的那样从左到右填充。因为您没有高度属性、输入高度属性或添加新行，所以它不会填充行下方：

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

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

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