33

次の配置を実現したいと思います。

画像の横にある 2 つの異なるテキスト (ブロック内) フローティング/インライン。（div内のすべて）。

さまざまな表示設定 (ブロック + テキストのインラインなど) を試してみましたが、まだ機能していません。

ここに画像の説明を入力

HTML:

<div class="res">
<img src="<?php echo 'img/'.$row["sType"].'.png';?>"/>
<span>TITLEe</span>
<span>Description</span>
</div>

CSS:

.res {

    height:60px;
    background-color:yellow;
    border-bottom:1px solid black;
    text-align:left;

}

.res img {

    margin-top:8.5px;
    margin-left:5px;
    display:inline
}

.res span {

    display:block;
}
4

5 に答える 5

63
于 2012-08-07T12:04:27.607 に答える
3

こんにちは、なぜ左にフロートしていたのですか？このfloatように使用せずにこれを行うことができます

<div class="res">
<img src="<?php echo 'img/'.$row["sType"].'.png';?>"/>
<div class="text"><h5>TITLEe</h5>
  <p>Description</p></div>
</div>

CSS

    .res {
    height:60px;
    background-color:yellow;
    border-bottom:1px solid black;
}
img, .text{
vertical-align:top;
}
.text{
display:inline-block;
}
p, h5{
margin:0;
  padding:0;
}

設計に応じてcss、クラスに変更します

于 2012-08-07T12:10:11.570 に答える
2

レイアウトにテーブルを使用することはお勧めしませんが、テーブルを使用した古典的な方法を試すことができます

<table>
  <tr>
    <th><img src="yourimage" /> </th>
    <th >adsasd<br/>adas</th>
  </tr>
</table>
于 2012-08-07T12:04:12.447 に答える
1

これを試してください.....動作するはずです

html:

<div id="testDiv">
    <div class="imgContainer"><img src="path/image.jpg" /></div>
    <div class="textContainer"></div>
</div>

CSS:

#testDiv { float:left; width: 360px; }
#testDiv .imgContainer { float:left; width:120px; height:90px; }
#testDiv .textContainer { float:left; width:240px; height:90px; overflow:hidden }
于 2012-08-07T12:00:20.070 に答える
0

以下が必要だと思います。

HTML:

<div class="wrap">
  <img src="img.jpg" class='left;' />
  <h1 class='right'>TITLE</h1>
  <div class='right'>Element description</div>
</div>

CSS:

.wrap { width: 600px; /* Just a sample value */ }
.left { width: 200px; float: left; }
.right { margin-left: 220px; width: 380px;}

これでうまくいくはずです。必要に応じて幅とマージンのパラメーターを調整します。

于 2012-08-07T12:01:28.950 に答える