html - 防止文本在图像后面移动

Question

我有一个页面，左侧是图像，右侧是文本。调整浏览器窗口大小时，或使用较小的分辨率时，文本会位于图像后面。我希望文字始终在图像旁边，而不是在图像后面。

有什么建议吗？ http://jsfiddle.net/TYpCq/ (jsfiddle 上的布局有点偏离。没关系，我只需要知道如何防止文本位于图像后面)

HTML:

<div id="indishopmain">

<p><strong>Test shop image</strong> by <strong>no one</strong></p>

<div id ="canvasshopwrap">
<div id="canvasshophead">
<p>Blabla</p>
</div>

<div id="canvasshoptext"</p>
<p>The high-quality print on a <span style="color:#01A07E;font-family:Cusmyrb;">stretched canvas</span> lets the artwork just pop of the wall, it’s almost magical. It’s easy to hang up and will keep it’s color brillance as well as the shape for a long time. We are sure, you will love it forever. Note: the size 20 x 20cm comes with a complementary easel.</p>
</div>

</div>

<div id="indishopimg">
<img src="frontgallery/1.jpg" alt="gallery image 1" width="500px" />
</div>

</div>

CSS:

#indishopmain {
    width:100%;
    padding:0em;

}

#indishopmain p {
    text-align:center;
    font-family:Logo;
    color:#343234;
    margin-top:4em;
    font-size:90%;
}

#indishopimg img {
    margin-top:-11.9em;
    margin-left:10%;
    -moz-box-shadow: 5px 5px 10x #000000;
    -webkit-box-shadow: 5px 5px 10px #000000;
    box-shadow: 5px 5px 10px #000000;
}

#canvasshophead {
    display:inline-block;
    width:11em;
    background-color:#5020B8;
    height:2em;
    border-radius:3px;
    -moz-border-radius:3px;
}

#canvasshophead p {
    font-family:Cusmyrb;
    color:#ffffff;
    font-size:30px;
    text-align:center;
    line-height:2;
    margin-top:0;
}

#canvasshopwrap {
    margin-left:60%;
    width:11em;
    display:inline-block;
}

#canvasshoptext p {
    font-family:Cusmyr;
    font-size:14px;
    color:#343234;
    text-align:left;    
}

#canvasshoptext {
    width:11em;
}

Answer 1

在不知道您想要完成什么的情况下(您的代码中的内容让我怀疑它们是否是设计使然)我假设您正在尝试将静态元素置于页面中间。如果您要使用流畅的布局(例如会自动降级为移动设备的布局)，则解决方案看起来会有所不同。

jsfiddle 在这里:http://jsfiddle.net/RbA92/

我发现为元素添加临时背景色在调试时非常有帮助。出于本练习的目的，我已将它们留在那里供您使用，以便您可以轻松查看发生了什么。我还建议将这些颜色放在您原来的 fiddle 上(并将边距更改为填充以真正查看发生了什么)。你那里有一些东西没有按照你的预期表现......我认为 :)

这里有一些样式的分割。我注释掉了我“删除”的样式，并注释了我添加的内容和原因。

body { text-align: center; } /* centers all content */

#indishopmain {
    padding:0em;
    /*width: 100%;*/
background-color: blue;
    overflow: hidden; /* allows us to float elements inside a non-floated element */
    width: 700px; /* gives the browser a literal size to render, which keeps the elements from moving when the window is resized */
    text-align: left; /* keeps child elements from inheriting the text-aling: center we put on the body */
    margin: 0 auto; /* this is what actually centers our item. use this with body {text-align: center;} */
}

#indishopmain p {
    text-align:center;
    font-family:Logo;
    color:#343234;
    margin-top:4em;
    font-size:90%;
}

#indishopimg img {
    /*margin-top:-11.9em;
    margin-left:10%;*/
    -moz-box-shadow: 5px 5px 10x #000000;
    -webkit-box-shadow: 5px 5px 10px #000000;
    box-shadow: 5px 5px 10px #000000;
    float: left; /* float this bad boy all the way to the left */
}

#canvasshopwrap {
    /*margin-left:60%;*/
    width:11em; /* having this in em could break your layout. consider putting this in px to keep it from getting too big for it's area and being pushed to the bottom */
    /*display:inline-block;*/
background-color: red;
    float: right; /* float this one all the way to the right */
}

#canvasshophead {
    /*display:inline-block;*/
    width:11em;
    background-color:#5020B8;
    /*height:2em;*/
    border-radius:3px;
    -moz-border-radius:3px;
    padding: 0  0 .5em 0; /* it's better to size the CONTENT how you want, so this box will always contain it. size thie box but leave the contents dynamic and you could end up with the content outside of your container */
}

#canvasshophead p {
    font-family:Cusmyrb;
    color:#ffffff;
    font-size:2em;
    text-align:center;
    line-height:2;
    margin:0; /* remove any browser-specific formatting */
    padding: 0;  /* ditto */
}

#canvasshoptext {
    width:11em;
}

#canvasshoptext p {
    font-family:Cusmyr;
    font-size:14px;
    color:#343234;
    text-align:left;
    padding: 0;  /* remove any browser-specific formatting */
    margin: 0;  /* ditto */
}

希望这就是您正在寻找的答案。