Question

尝试让两个div在容器div中并排放置，但它们不会遵循width属性，因此我无法相互接近。我试图使用其他问题的解决方案，但没有一个有效。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你的类属性中有错误的拼写错误。

Name                           Value
----                           -----
PSVersion                      5.1.16299.251
PSEdition                      Desktop
PSCompatibleVersions           {1.0, 2.0, 3.0, 4.0...}
BuildVersion                   10.0.16299.251
CLRVersion                     4.0.30319.42000
WSManStackVersion              3.0
PSRemotingProtocolVersion      2.3
SerializationVersion           1.1.0.1

相反，tt应该是

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

并且不要忘记使用div元素来清除浮动元素，这对于避免因float：left属性而产生的布局问题非常重要。

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

Answer 2

首先，你错误地打字＆＃34; intro-container-text＆＃34; ...在你的html中是＆＃34; into-container-text＆＃34;并在css＆＃34; intro-container-text＆＃34 ;;

其次，您只需要向父母说明您希望孩子与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

再次检查班级中的命名。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

使用C:\Users\pupeno\app>echo %JAVA_HOME% "c:\Program Files\Java\jdk-10" C:\Users\pupeno\app>%JAVA_HOME%\bin\javac.exe --version javac 10和C:\Users\pupeno\app>mvn package Files\Java\jdk-10""=="" was unexpected at this time. C:\Users\pupeno\app>mvn --help Files\Java\jdk-10""=="" was unexpected at this time. C:\Users\pupeno\app>cd .. C:\Users\pupeno>mvn --help Files\Java\jdk-10""=="" was unexpected at this time.

检查我的代码：

＆＃13;

min-height

＆＃13;

display: inline-block

＆＃13;

宽度百分比不适用于div

4 个答案: