html - 我的网页左侧有图片，但我希望文本位于图片右侧，而不会破坏图片当前的布局方式

Question

Here's the live site它被托管在带有转发子域的谷歌驱动器上，有时 CSS 无法在 chrome 中正确加载，因为它认为存在不安全的脚本

我正在使用的代码将显示在下面(但是图像不会显示，它们仍然与实时网站上的大小相同)

http://jsfiddle.net/wtHec/

<style>
#text{
    float: right;
    text-align: left;
}
#images{
    text-align: left;
    width: 220px;
}
p{
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    margin: -5px 0px 10px 10px;
    padding: 0px 0px 10px 0px;
}
img{
    border: white solid 2px;
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 220px;
    height: 124px;
}
html {
    background: #383636;
}
</style>
<div id="text">
<p>
I want this text to be right next to the images<br>
now how do I fix this...
</p>
</div>
<div id="images">
    <a target="_blank" href="http://www.youtube.com/embed/a88kO4couJ4"><img src="/resources/images/gungame.jpg"></a>
<a target="_blank" href="http://www.youtube.com/embed/-pPzVRE9tjY"><img src="resources/images/FTB16.jpg"></a>
<a target="_blank" href="http://www.youtube.com/embed/XXF52t03dZc"><img src="resources/images/cmwep1.jpg"></a>
<a target="_blank" href="http://www.youtube.com/embed/cl_qwysQZJE"><img src="resources/images/aosep1.jpg"></a>
</div>

Answer 1

float 图像和文本div。

.images, .text{
    float:left;
}

.images{
    width:200px;
}

.text{
    width:400px;
}

.images img{
    float:left;
    clear:both;
}

参见此处:http://jsfiddle.net/9ejnk/