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

删除此margin-top：

#indishopimg img {
    margin-top:-11.9em;     <--- here
    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添加到上面的CSS中。

Answer 2

在不知道你想要完成什么的情况下（你的代码中的东西让我想知道它们是否符合设计）我会假设你试图让一个静态元素居中在页面中间。如果你想要一个流畅的布局（例如会自动降级为移动设备的东西），解决方案看起来会有所不同。

jsfiddle here：http://jsfiddle.net/RbA92/

我发现在调试时向元素添加临时背景颜色非常有用。出于本练习的目的，我已将它们留在那里，以便您可以轻松查看正在发生的事情。我还建议将这些颜色放在原来的小提琴上（并将填充边距更改为真正看到正在发生的事情）。你在那里有一些不符合你意图的事情...我认为：）

这里有一些你的风格细分。我评论了我“删除”的样式，并注释了我添加的内容和原因。

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 */
}

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

防止文本移动到图像后面

2 个答案: