0

这是在谷歌驱动器上托管的具有转发子域的实时站点，有时 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>
4

2 回答 2

0

首先是答案：http: //jsfiddle.net/mDef9/

然后是一些代码： CSS：

.clear {
    clear:both /*so you can start another set of image and text*/
}
.images{
    border: white solid 2px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 220px;
    height: 135px;
    float:left;    
}

.img1 {
    background: url(https://googledrive.com/host/0BwopdsZySMlGS2xCTUZ2bHl0QUU/resources/images/gungame.jpg) no-repeat;
    background-size: 220px 135px;
}
.img2 {
    background: url(https://googledrive.com/host/0BwopdsZySMlGS2xCTUZ2bHl0QUU/resources/images/FTB16.jpg) no-repeat;
    background-size: 220px 135px;
}
.caption{
    width: 200px; /*can be whatever you want*/
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    float: left
}

HTML：

<div id="images">
    <a class="images img1" target="_blank" href="http://www.youtube.com/embed/a88kO4couJ4"></a> 
    <p class="caption">This is the text that will appear next to yhe image.</p>
    <div class="clear"></div>

    <a class="images img2" target="_blank" href="http://www.youtube.com/embed/a88kO4couJ4"></a> 
    <p class="caption">This is some more boss text.</p>
    <div class="clear"></div>
</div>

现在继承一些知识：

  1. 无需将元素放入元素中，您可以在 css 中的块元素上声明背景
  2. 您的图像标签最后需要“/”
  3. 您的#images div 不能是图像的确切大小，“因为”您添加了边距，您必须考虑到这一点，因为您给#images 提供了 220 像素的固定宽度。但是您的图像是 220 + 10px 边距-左右边距，即 220+10+10=240px。所以 div #images, width 必须 >= 240px 或设置为“auto”
  4. 由于您使用的是相对路径，因此图像也没有显示在 jsfiddle 中。这些图像位于另一台服务器上，因此如果您不托管它们，则必须使用绝对路径。示例http://www.yousite.com/path-to-images/some-image.jpg
于 2013-06-15T02:34:44.410 回答
0

浮动图像和文本div。

.images, .text{
    float:left;
}

.images{
    width:200px;
}

.text{
    width:400px;
}

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

见这里：http: //jsfiddle.net/9ejnk/

于 2013-06-15T02:00:49.597 回答