-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 回答