Question

UPDATE我实际上已经看到了它的长度，因为.main div是父级，它的大小是它的大小。我不确定如何调整......

尝试减少虚线以匹配与文本相同的高度，我该怎么做？

        <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;
  }

Answer 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添加更多内容将自动执行操作

Answer 2

只需尝试将img的margin设置为较小的值，并将所有其余元素的margin和padding设置为0.

选中此Fiddle

设置

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

将此添加到css

* { 
    margin: 0; 
    padding: 0; 
}

截至目前为我做了伎俩。但这一切都取决于图像的高度。设置此边距属性后，如果图像的高度大于文本高于div高度将扩展，webkit行也将如此。这是迄今为止针对您的问题的手动解决方案，但还有许多其他方法可以实现此目的，只是尝试更改您的方法以获得更加动态的解决方案。

如何减少白色虚线的长度，使其与图像和文字高度相匹配？

2 个答案: