1

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

有什么建议么？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;
}
4

2 回答 2

0

删除此边距顶部：

#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 中。

于 2013-03-26T18:09:09.360 回答
0

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

jsfiddle在这里：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 */
}

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

于 2013-03-26T20:26:34.587 回答