-1

更新 .main div が親であり、それに合わせたサイズであるため、実際にその長さを見てきました。調整の仕方がわからない…

テキストと同じ高さに合わせて破線を縮小しようとしていますが、どうすればよいですか?

フィドルはこちらhttp://jsfiddle.net/7U7H3/

        <div class="container clearfix">

<div class="main">
    <p>
        The best selection of cheese I've ever seen! Cannot wait for our next order!
    <p >
    <img src="img/cheese1.jpg" alt="sky">
    </p>
    <p>
        <img src="img/cheese2.jpg" alt="sky" id="img">
    </p>
        <p id="mainb">
        The best selection of cheese I've ever seen! Cannot wait for our next order!
    <p>
</div>


  .main {
     -webkit-column-gap: 1em;
     -webkit-column-rule: 5px dotted #FFF;
     -webkit-columns: 100px 2;
     font-size: 3.5vw;
     text-align: right;
     line-height: 1.0;
   }
 img {
     margin: 1.5em 0;
     max-width: 100%;
    float:left;
  }
4

2 に答える 2

1

これがデモですhttp://jsfiddle.net/PxPMW/

  .newspaper
   {
      column-count:3;
      column-gap:40px;
      column-rule:4px dotted #ff00ff;

      /* Firefox */
       -moz-column-count:3;
       -moz-column-gap:40px;
       -moz-column-rule:4px dotted #ff00ff;

       /* Safari and Chrome */
       -webkit-column-count:3;
       -webkit-column-gap:40px;
       -webkit-column-rule:4px dotted #ff00ff;
       }
        img{
            width:100px;
            height:100px;
           }

div にコンテンツを追加します。それまでは修正されません。div にコンテンツを追加すると、自動的にうまくいきます

于 2013-09-14T13:46:14.953 に答える
0

img のマージンを少し小さい値に設定し、残りのすべての要素のマージンとパディングを 0 に設定してみてください。

このフィドルをチェック

設定

img {
       margin: 0.1em 0;
       max-width: 100%;
       float:left;
}

これをcssに追加

* { 
    margin: 0; 
    padding: 0; 
}

今のところ私のためにトリックをしました。しかし、それはすべて画像の高さに依存します。画像の高さが div の高さよりもテキストより大きい場合、この余白プロパティを設定した後、高さが拡大し、webkit の行も拡大します。これは問題に対する手動の解決策ですが、これを達成する方法は他にもたくさんあります。より動的な解決策にアプローチを変更してみてください。

于 2013-09-14T13:41:01.660 に答える