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 に答える