0

私のウェブページには一連の画像があります。写真に関する情報を表示する画像の前に div を付けました。仕様に合わせて div をシフトしましたが、問題は、テキストの文字数に合わせて画像も右にシフトしたことです。また、各画像の幅と高さの推定に関連する PHP コードがあることにも注意してください。タグまたはクラス/ID を追加または削除すると、コードが台無しになります。私は今何をすべきか途方に暮れています。

HTML 部分

<div id="tube">
  <div class="part_1">
    <div class="text">wed  dfasdfasd  sda asd  sa asd </div>
        <img class="image_section_1"  src="https://encrypted-tbn3.google.com

        /images?q=tbn:ANd9GcRGr-DN5J2NpvVMVBcu-MgRFkN3S5CCpZ-H6OGxDLoNwNrYM9k3HQ" />

    <div class="text">wed  dfasdfasd  sda asd  sa asd </div>
        <img class="image_section_2"  src="https://encrypted-tbn3.google.com

        /images?q=tbn:ANd9GcRGr-DN5J2NpvVMVBcu-MgRFkN3S5CCpZ-H6OGxDLoNwNrYM9k3HQ" />
  </div>
</div>

ここにCSSがあります

*{border:1px solid grey; padding: 0; margin: 0;}

html { background-color: whitesmoke; height: 100%; width:500%;}

#tube {  height: 100%; margin-top: 50px; padding-left: 10px;}

.part_1 {height: 44%; width: 100%;  }

#tube img {border-radius:5px; padding: 7px; background-color: white; padding-bottom: 

35px; border:1px solid grey; margin: 5px; box-shadow: 1px 1px 3px black;}

.image_section_1 {width: 5.4%; height: 67%;margin-right: 25px;}

.image_section_2 {width: 5.4%; height: 67%;margin-right: 25px;}

.text {display: inline; width: 100px; position: relative; left: 250px; bottom: 25px; 

overflow: hidden;  }*{border:1px solid grey; padding: 0; margin: 0;}

jfiddle の例も作成しました。ご覧のとおり、画像を互いに隣り合わせに配置し、左の画像を左の境界線から数ピクセルだけ離して配置したいと考えています。http://jsfiddle.net/7xxxw/4/

4

2 に答える 2

0

これはあなたが探しているものですか？

デモ

JSFiddle

HTML

<div id="tube">
    <div class="part_1">
        <div class="image">
            <img src="https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcRGr-DN5J2NpvVMVBcu-MgRFkN3S5CCpZ-H6OGxDLoNwNrYM9k3HQ">
            <p class="legend">wed  dfasdfasd  sda asd  sa asd</p>
        </div>
    </div>
</div>

CSS

html { background-color: whitesmoke; height: 100%; width:500%;}

#tube {height: 100%; margin-top: 50px; padding-left: 10px;}

.part_1 {height: 44%; width: 100%;  }

.image {
    display: inline-block;
    margin: 5px;
    padding: 7px 7px 35px;
    background-color: white;
    border: 1px solid grey;
    border-radius: 5px;
    box-shadow: 1px 1px 3px black;
    overflow: auto;
    text-align: center;
}

.legend {
    padding: 0;
    margin: 0;
}
于 2012-08-28T01:10:49.270 に答える
0

画像とテキストの両方を同じ中に入れ、<div>その場所に適用します<div>。画像の後にテキストを追加します。

于 2012-08-28T00:40:58.447 に答える