Question

这是我应该如何获取内联div或者是否有必须完成的语义方式？当我将div设置为内联并向左浮动时，它们不会内联，它们会保留为块，任何人都可以提前解释这个问题。我有包作为其他两个div的容器的原因是为了使其内联并希望得到另外两个内联但它没有用。

当前代码：

＆＃13;

.packages {} .basic {
  width: 460px;
  display: inline;
  float: left;
  margin: 10px 10px 0px 10px;
}
.advanced {
  width: 460px;
  display: inline;
  float: left;
  margin: 10px 10px 0px 10px;
}

＆＃13;

<div class="packages">
  <div class="basic">
    <h3>Basic Package</h3>
    <p>Lorem ipsum dolor sit amet, usu dicit vituperata eu. Doctus utroque efficiendi vis id, cum dicunt possim officiis cu. At quod vidisse nam. Mentitum posidonium ex pro, ad blandit.</p>
    <p><a href="#">Learn More</a>
    </p>
  </div>
  <div class="advanced">
    <h3>Advanced Package</h3>
    <p>Lorem ipsum dolor sit amet, usu dicit vituperata eu. Doctus utroque efficiendi vis id, cum dicunt possim officiis cu. At quod vidisse nam. Mentitum posidonium ex pro, ad blandit</p>
    <p><a href="#">Learn More</a>
    </p>
  </div>
</div>

＆＃13;

Answer 1

使用宽度为50％并删除边距...如果您想要间隙使用填充。

 .packages {
 
 } 

.basic {
   width:50%;
   float: left;
   
 }
 .advanced {
   
   width:50%;
   float: left;
   
 }

<div class="packages">
  <div class="basic">
    <h3>Basic Package</h3>
    <p>Lorem ipsum dolor sit amet, usu dicit vituperata eu. Doctus utroque efficiendi vis id, cum dicunt possim officiis cu. At quod vidisse nam. Mentitum posidonium ex pro, ad blandit.</p>
    <p><a href="#">Learn More</a>
    </p>
  </div>
  <div class="advanced">
    <h3>Advanced Package</h3>
    <p>Lorem ipsum dolor sit amet, usu dicit vituperata eu. Doctus utroque efficiendi vis id, cum dicunt possim officiis cu. At quod vidisse nam. Mentitum posidonium ex pro, ad blandit</p>
    <p><a href="#">Learn More</a>
    </p>
  </div>
</div>

Answer 2

width设置calc(50% - 20px)。这个20px是因为边距。通过这种方式，你可以保持你的利润。

有例子：

＆＃13;

.packages {} .basic {
  width: calc(50% - 20px);
  display: inline;
  float: left;
  margin: 10px 10px 0px 10px;
}
.advanced {
  width: calc(50% - 20px);
  display: inline;
  float: left;
  margin: 10px 10px 0px 10px;
}

＆＃13;

<div class="packages">
  <div class="basic">
    <h3>Basic Package</h3>
    <p>Lorem ipsum dolor sit amet, usu dicit vituperata eu. Doctus utroque efficiendi vis id, cum dicunt possim officiis cu. At quod vidisse nam. Mentitum posidonium ex pro, ad blandit.</p>
    <p><a href="#">Learn More</a>
    </p>
  </div>
  <div class="advanced">
    <h3>Advanced Package</h3>
    <p>Lorem ipsum dolor sit amet, usu dicit vituperata eu. Doctus utroque efficiendi vis id, cum dicunt possim officiis cu. At quod vidisse nam. Mentitum posidonium ex pro, ad blandit</p>
    <p><a href="#">Learn More</a>
    </p>
  </div>
</div>

＆＃13;

Answer 3

您拥有的内容适用于960px或更宽的屏幕（每个框的组合宽度和边距）。如果您想要在所有屏幕尺寸下工作，请考虑使用百分比。

.basic,
.advanced {
    width: 50%;
    float: left;
}

如果浏览器支持不是问题，您可以使用flex-box。

.package {
  display: flex;
}

.basic,
.advanced {
  flex: 1;
}

您可能还会考虑Bootstrap这样的框架来处理所有这些问题。

Answer 4

删除margin并在%中添加宽度使用这个CSS它会帮助你..

<强> CSS

.basic {
    width:50%;
    float:left;
  }
 .advanced {
    width:50%;
    float:left;
  }

Answer 5

.basic {
display:inline;
float:left;
margin:10px 10px 0px 10px;
max-width:40%;
}

.advanced {
display:inline;
float:right;
margin:10px 10px 0px 10px;
max-width:40%;
}

如果您正在寻找语义内联元素，请使用span元素而不是div

Answer 6

实际上它已经有效了。如果您将代码放在大于920px的容器中，它应该并排放置。但是如果你想让它们在任何地方并排放置，我建议你使用百分比宽度，如下所示。

最好使用display：inline-block而不是float：left和display：inline否则你的两个浮动div将超出主div.packages。

.packages {} .basic {
      width: 45%;
      display: inline-block;
      margin: 10px 10px 0px 10px;
    }
    .advanced {
      width: 45%;
      display: inline-block;
      margin: 10px 10px 0px 10px;
    }

如何让我的两个div在同一条线上而不为每个div设置宽度？

6 个答案: