1

その下に画像とテキストのブロックがあります。画像のテキスト幅の最大幅を作成しようとしています。（画像のサイズは定義されておらず、親divのサイズも定義されていません）

<div>
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/NYers_celebrate_historic_vote_for_gay_marriage.webm/300px--NYers_celebrate_historic_vote_for_gay_marriage.webm.jpg"/>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non risus dolor, a euismod leo. Phasellus viverra aliquet felis eget porttitor. Aenean sollicitudin, nulla id ultrices ullamcorper, sem lectus sagittis metus, ut sodales dui nunc id sem. Vestibulum nisl justo, aliquet id luctus eu, tincidunt sit amet diam. Suspendisse at nulla nisl. Duis sed sapien odio, eget commodo metus. Fusce ultricies lectus sit amet massa tristique eu ultricies elit accumsan. Donec mi mi, elementum sit amet faucibus sed, pellentesque sed neque. Pellentesque ut tincidunt dui. Nullam in urna vitae arcu lobortis porta sit amet a sapien. Maecenas at ultricies erat. Maecenas diam arcu, condimentum eu gravida quis, aliquam at nunc. Duis at fermentum orci. Donec porta feugiat purus faucibus euismod. In pretium auctor nulla, blandit dapibus ante auctor at.</p>
</div>

理解を深めるために簡単なモックアップを描きます-ここに画像の説明を入力してください

Codepen- http: //codepen.io/anon/pen/kJLrF

これを実装する方法はありますか？（このようなマークアップは必要ありません。必要に応じて要素を追加できます）

助けてくれてありがとう！

4

5 に答える 5

1

それらを別の要素でラップし、divそのmax-widthプロパティを設定してから、次のように画像の100％幅を定義する必要があります。

div {
    max-width: 500px;
}

div img {
    width: 100%;
}

このjsFiddleデモをご覧ください> http://jsfiddle.net/Vt9CL/

于 2013-02-20T13:37:05.370 に答える
1

構築した構造を主張する場合は、JS が唯一の選択肢です。

$(init);

function init()
{
  var w = $("img").innerWidth();
  $('p').css({"width": w});
}

http://jsbin.com/iunix/1/

ただし、画像と段落テキストを別のコンテナーにラップする方がよいでしょう。

于 2013-02-20T13:40:37.710 に答える
1

私は少し遊んで、何とかそれを行うことができましたhtmland css:html:

<div class="container">
   <img src="http://dummyimage.com/300x200/000/fff&text=image" />
   <p>Lorem ipsum [...]</p>
</div>

CSS:

.container {
   margin: 0 auto;
   width: -moz-min-content;
   width: -webkit-min-content;
}

フィドル

問題は、Firefox と Chrome でしか機能しないことです。

于 2013-02-20T14:27:13.687 に答える
0

Mhhhhm, I have no idea if it's possible to do this via css. If you want to get this done without javascript, the only thing which I know is something like this: http://goo.gl/U3pBE

于 2013-02-20T13:49:15.990 に答える
0

この小さなスクリプトを使用してこれを実現できます。

$('p').css('width',$('img').width() + 'px');

の を取り、widthの に適用imgしています。ここにjsFiddleがありますwidthp

于 2013-02-20T13:42:40.633 に答える