0

このjsFiddleでレイアウト テーブルを使用しないようにしています。よりセマンティックでジェネリックなマークアップと CSS を考え出す必要があります。

左の列に画像、右の列に説明があります。

ただし、いくつかの課題があります。ピクセルの寸法がわからず、説明が非常に長くなる可能性があるため、2 つの div を並べて単純にフロートすることはできません。

画像も垂直方向に配置する必要がありますが、コンテナーの高さや画像サイズはわかりません。

表示: テーブルはオプションではありません。Javascriptはオプションではありません

<table>
 <tr>
    <td class="image">
        <img src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png">
    </td>

    <td class="description">
        <p>Left section only needs to be as wide as image is, and we don't know pixel size of the image. It has to be vertically centered.</p>

        <p>Right section should take all available space left</p>

        <p>We do not know how much text will be in the right section.</p>            
        <p>We can not use display: table since solutions needs to work in IE7 as well</p>                        
    </td>
  </tr>
<table>

アイデアを投げてください:)

4

5 に答える 5

1

解決策は次のとおりです。

http://jsfiddle.net/ZXfFG/3/

説明：

したがって、2 つの問題があります。1) 2 つの列の幅と高さを調整します。2) 画像を垂直に配置します。

ソリューション:

1) 左の列の幅は、その子 (画像) の幅に合わせて調整されるため、自動的に調整されます。float プロパティを left に設定すると、テキストがそのすぐ隣に貼り付けられます。テキストが画像より短い場合はこれで問題ありませんが、おっしゃったように長い場合はどうでしょうか。次に、次のようなものが得られます。

ここに画像の説明を入力

そのため、右の列を長方形のように動作させる必要があります。通常、左の列の高さを 100% に設定すると問題は解決しますが、親の高さが固定されていないため、これは機能しません。とにかく、右側の列のオーバーフロー プロパティを設定すると、この問題が解決されます。

.right {
    overflow:hidden;
}

2) JavaScript またはテーブル レイアウトを使用しないと、画像を垂直方向に中央揃えに設定することはできません。ただし、できることは次のとおりです。可視性を非表示に設定して画像を非表示にします。この方法では、左の列は引き続きその幅になります。次に、親コンテナの背景画像を画像に設定し、左中央に配置します。

.container {
    background:url("http://www.sourcegate.com/images/stackoverflow-logo.png") left center no-repeat;  
}

これで非 js、非テーブル ソリューションを終了しますが、心のどこかで JavaScript を試してみたいと思った場合、それを行う方法はたくさんありますが、これが私が行うことです: (1コード行)

<code>$(".container").css('padding-left', $('img').width() + "px"); </コード>

http://jsfiddle.net/GtEdc/

于 2012-08-02T04:58:30.023 に答える
0

IE8を使用しているため、IE7でこれをテストすることはできませんが、試してみてください。

http://jsfiddle.net/ZXfFG/1/

IEのもう1つの問題であるため、画像を垂直方向に中央揃えする方法について説明しますが、これは次のように単純なものにする必要があります。vertical-align: middle

HTML：

<div class="container">
    <img src="http://www.sourcegate.com/images/stackoverflow-logo.png" />
    <div class="text">
        <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. Lorem ipsum. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.The quick brown fox jumped over the lazy dog. This is filler text. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.The quick brown fox jumped over the lazy dog.The quick brown fox jumped over the lazy dog.The quick brown fox jumped over the lazy dog. Dolor ipsum valorum. The quick brown fox jumped over the lazy dog.The quick brown fox jumped over the lazy dog.The quick brown fox jumped over the lazy dog.The quick brown fox jumped over the lazy dog.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

CSS：

body
{
    overflow-x: hidden;
}
.container
{
    display: inline-block;
    width: 100%;
    height: 100%;
}
.container img
{
    float: left;
    max-width: 50%;
    vertical-align: middle;
}
.text
{
    max-width: 50%;
    float: right;
}​
​
于 2012-08-01T19:37:09.610 に答える
0

バックエンドからの幅がわからない場合は、min-widthを使用できます。

于 2012-08-02T13:14:05.750 に答える
0

ここでjQueryを考慮できないと確信していますか? もしそうなら、これがどれほど簡単かをチェックしてください。

$(".column").height(Math.max($(".image").height(), $(".description").height()));
$(".column").width(Math.max($(".image").width(), $(".width").width()));

これらの 2 行のコードは、同じ高さ、同じ幅の 2 つの列を生成します。質問を無視する回答を読んだとき、私はいつも嫌いで、ここでそれをやっています。しかし、これはスクリプトを作成するだけです。

于 2012-08-01T02:35:01.023 に答える
0

YAML CSS フレームワークには、IE7 で動作するこれに対する解決策があります。フレームワーク全体を実装したくない場合は、それらの例からいくつかのアイデアを得ることができるはずです (セクション Equal Height Grids の Grids モジュールの下にあります)。

于 2012-07-31T18:19:50.047 に答える