宽度百分比不适用于 div

Question

试图让两个 div 并排放置在容器 div 中，但它们不遵循 width 属性，所以我无法获得下一个对彼此。我尝试使用其他问题的解决方案，但 none 的解决方案有效。

.intro-container {
  width: 100%;
  min-height: 400px;
  background-color: #fdee58;
  margin: 0;
  padding: 0;
}

.intro-container-text {
  width: 50%;
  margin: 0;
  padding: 0;
  background-color: #ff0000;
  float: left;
}

.intro-containter-img {
  width: 50%;
  margin: 0;
  padding: 0;
  background-color: #00ffff;
  float: left;
}

<div class="intro-container">
  <div class="into-container-text"></div>
  <div class="intro-container-img"></div>
</div>

Answer 1

您的 class 属性有误。

<div class="into-container-text"></div>

相反，tt 应该是

<div class="intro-container-text"></div>

并且不要忘记有一个 div 元素来清除浮动，这对于避免因浮动引起的布局问题很重要：left 属性.

<div class="intro-container">
  <div class="intro-container-text"></div>
  <div class="intro-container-img"></div>
  <div class="clear"></div>
</div>

.clear {
clear: both;
}

Answer 2

首先你拼错了 "intro-container-text"... 在你的 html 中是 "into-container-text" 而在 css "intro-container-text";

其次，您只需要对 parent 说您希望子项显示与 display:flex; 一致，然后您可以删除浮动。

<div class="intro-container">
<div class="intro-container-text"></div>
<div class="intro-container-img"></div>
</div>

.intro-container {
  display: flex;
    width: 100%;
    min-height: 400px;
    background-color: #fdee58;
}
.intro-container-text {
    width: 50%;
    background-color: #ff0000;
}
.intro-container-img {
    width: 50%;
    background-color: #00ffff;
}

我为你创建了一个fiddle。

编码愉快:)

Answer 3

再次检查 class 中的命名。

.intro-container{
    width: 100%;
    min-height: 400px;
    background-color: #fdee58;
    margin: 0;
    padding: 0;
}
.intro-container-text{
    width: 50%;
    min-height: 100px;
    margin: 0;
    padding: 0;
    background-color: #ff0000;
    float: left;
}
.intro-container-img{
    width: 50%;
    min-height: 100px;
    margin: 0;
    padding: 0;
    background-color: #00ffff;
    float: left;
}

<div class="intro-container">
    <div class="intro-container-text"></div>
    <div class="intro-container-img"></div>
</div>

Answer 4

使用min-height和display: inline-block

检查我的代码：

.intro-container {
  width: 100%;
  min-height: 400px;
  background-color: #fdee58;
  margin: 0;
  padding: 0;
}

.intro-container-text {
  width: 50%;
  margin: 0;
  padding: 0;
  min-height: 100px;
  display: inline-block;
  background-color: #ff0000;
  float: left;
}

.intro-containter-img {
  display: inline-block;
  min-height: 100px;
  width: 50%;
  margin: 0;
  padding: 0;
  background-color: #00ffff;
  float: left;
}

<div class="intro-container">
  <div class="intro-container-text"></div>
  <div class="intro-containter-img"></div>
</div>

宽度百分比不适用于 div

Width percentages not working with div

html

css

width