Question

我在div中应用内联块时遇到了不需要的空格问题。我试图缩小div以适应它的内容。任何帮助将不胜感激。

以下代码：

<div class="wrap">
    <div class="content1">
            <p>Lorem ipsum dolor sit amet, sed ex elitr perfecto, noluisse 
            intellegam definitionem ad sed. Mei at aliquip pertinacia. Novum
            omnes incorrupte ei vix, ad oratio mediocrem iracundia nec, 
            ea possit prompta sed. Liber sapientem no eam, in nulla persius 
            volumus eum. Pro alienum indoctum liberavisse te. Verear 
            aliquam cotidieque mei te, ea sed debet aperiam comprehensam, 
            causae facilis neglegentur ei mea.</p>
    </div>
    <div class="content2">
      <ul>
        <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
        <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
        <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
        <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
      </ul>
    </div>
  </div>




*{padding: 0;
  margin: 0;
  }

.wrap {border: 1px solid yellow;
 display: inline-block;}

.content1 {
 width: 30%;
 border: 1px solid blue;
 display: inline-block;}

.content2 {
 width: 30%;
 border: 1px solid red;
 display: inline-block;}

Answer 1

首先，为什么需要内联块？您能提供更多关于您尝试做什么的例子吗？我假设内容块应该是页面宽度的30％，但它们将是它们所在内容的30％宽度。这是一个更好的方法：

.wrap {
      display: block;
      width: 30%;
      height: auto;
      position: relative;
}

.wrap .content1, .wrap .content2 {
      position: relative;
      width: 100%;
}

在css中，除非特别设计样式，否则任何元素都会继承其父元素。

Answer 2

您需要将<script type="text/javascript"> mixpanel.track("Page Loaded", { "Page Name": "Landing Page"}); </script>设置为float: left;：

.content1

*{padding: 0;
  margin: 0;
  }

.wrap {border: 1px solid yellow;
 display: inline-block;}

.content1 {
 width: 30%;
 border: 1px solid blue;
 display: inline-block;
  float: left;
 }

.content2 {
 width: 30%;
 border: 1px solid red;
 display: inline-block;}

Answer 3

有几种方法可以解决这个问题。其中一个是包装器中的<div class="credit-card" id="add-new-cc"> <div class="credit-card-inner"> <h3 class="blue sans-pro" id="add-new-cc-title">Add New Card</h3> <img src="images/add-circle.png" alt="Add New Credit Card" id="add-cc-img"> </div> </div>。

HTML：

font-size: 0;

CSS：

<div class="wrap">
  <div class="content1">
    <p>Lorem ipsum dolor sit amet, sed ex elitr perfecto, noluisse   intellegam definitionem ad sed. Mei at aliquip pertinacia. Novum omnes incorrupte ei vix, ad oratio mediocrem iracundia nec, ea possit prompta sed. Liber sapientem no eam, in nulla persius volumus eum. Pro alienum indoctum liberavisse te. Verear aliquam cotidieque mei te, ea sed debet aperiam comprehensam, causae facilis neglegentur ei mea.</p>
  </div>
  <div class="content2">
    <ul>
      <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
      <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
      <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
      <li> - Lorem ipsum dolor sit amet, sed ex elitr </li>
    </ul>
  </div>
</div>

这也可以帮助您：https://css-tricks.com/fighting-the-space-between-inline-block-elements/。

在<div>上使用内联块以适应内容的问题

3 个答案: