我是如何在不使用“浮动”的情况下并排获得图像的？

Question

我正在我自己的网站上工作，在我的技能部分，我应该有两个方案并排，但我的问题是，这是行不通的，我不知道为什么这是行不通的。

我已经尝试使用浮点，但我在这方面失败了，所以可能有烦人的选项可以使用。

​

.Skills {
  width: auto;
  background-color: #262626;
}
.Meine {
  padding-top: 54px;
  padding-left: 50px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 15px;
  color: #fff;
}
.skills {
  padding-top: 4px;
  padding-left: 50px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 15px;
  color: #fff;
}
.UnterschriftNo3 {
  padding-top: 7px;
  padding-left: 50px;
  font-size: 13px;
  font-weight: 400;
  color: #fff;
}
.TrennungNo3 {
  padding-top: 7px;
  padding-left: 50px;
}
.Photoshop > div > img {
  margin-top: 36px;
  padding-left: 49px;
}
.Illustrator > div > img {
  margin-top: 36px;
  padding-left: 49px;
}
.InDesign > div > img {
  margin-top: 36px;
  padding-left: 49px;
}
.Dreamweaver > div > img {
  margin-top: 36px;
  padding-left: 49px;
}
.AfterEffects > div > img {
  margin-top: 36px;
  padding-left: 49px;
}
.PremierePro > div > img {
  margin-top: 36px;
  padding-left: 49px;
}
.SonyVegas > div > img {
  margin-top: 36px;
  padding-left: 49px;
}
.Cinema4D > div > img {
  margin-top: 36px;
  padding-left: 49px;
  margin-bottom: 30px;
}

<div class="Skills">

  <div class="Meine">
    <div>MEINE</div>
  </div>
  <!--Meine-->

  <div class="skills">
    <div>SKILLS</div>
  </div>
  <!--skills-->

  <div class="UnterschriftNo3">
    <div>DAS IST MEIN KÖNNEN</div>
  </div>
  <!--UnterschriftNo3-->

  <div class="TrennungNo3">
    <img src="Images/Strich_320.jpg" alt="" />
  </div>
  <!--TrennungNo3-->

  <div class="Programme">
    <div class="Photoshop">
      <div>
        <img src="Images/Photoshop.png" alt="" />
      </div>
    </div>

    <p>
      <div class="Illustrator">
        <div>
          <img src="Images/Illustrator.png" alt="" />
        </div>
      </div>
    </p>

    <div class="InDesign">
      <div>
        <img src="Images/InDesign.png" alt="" />
      </div>
    </div>

    <div class="Dreamweaver">
      <div>
        <img src="Images/Dreamweaver.png" alt="" />
      </div>
    </div>

    <div class="AfterEffects">
      <div>
        <img src="Images/AfterEffects.png" alt="" />
      </div>
    </div>

    <div class="PremierePro">
      <div>
        <img src="Images/PremierePro.png" alt="" />
      </div>
    </div>

    <div class="SonyVegas">
      <div>
        <img src="Images/SonyVegas.png" alt="" />
      </div>
    </div>

    <div class="Cinema4D">
      <div>
        <img src="Images/Cinema4D.png" alt="" />
      </div>
    </div>
  </div>


</div>
<!--Skills-->

​

Answer 1

加上这个应该能让你走。只需将.Programme>div编辑成您的愿望:p

.Programme{
    display:flex;
    flex-direciton:row;
    flex-wrap:wrap
}

.Programme>div{
    width:40%;
   margin:0 auto;
}

Answer 2

只需将width :50%设置为Programmes div的内部内容，将width:100%设置为Programmes div即可。

.Photoshop, .Illustrator  {
  width: 50%
}
.Programme {
    width: 100%
}

Answer 3

让我们稍微清理一下，给您一个浮动选项。您有程序列表，所以让我们使用一个列表。然后我们将减少重复的CSS。

​

.Skills {
  width: auto;
  background-color: #262626;
}
.Meine {
  padding-top: 54px;
  padding-left: 50px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 15px;
  color: #fff;
}
.skills {
  padding-top: 4px;
  padding-left: 50px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 15px;
  color: #fff;
}
.UnterschriftNo3 {
  padding-top: 7px;
  padding-left: 50px;
  font-size: 13px;
  font-weight: 400;
  color: #fff;
}
.TrennungNo3 {
  padding-top: 7px;
  padding-left: 50px;
}

.Programme
{
  list-style-type:none;
  padding-left:0;
}

.Programme > li {
  float:left;
  width:50%;
}

/*Set Base settings for images */
.Programme img
{
  margin-top: 36px;
  padding-left: 49px;
}

//Cinema 4d seems to be special so lets add what is needed
.Cinema4D  img {  
  margin-bottom: 30px;
}

.clearfix:after {
    content:"";
    display:block;
    clear:both;
}

<div class="Skills">

  <div class="Meine">
    <div>MEINE</div>
  </div>
  <!--Meine-->

  <div class="skills">
    <div>SKILLS</div>
  </div>
  <!--skills-->

  <div class="UnterschriftNo3">
    <div>DAS IST MEIN KÖNNEN</div>
  </div>
  <!--UnterschriftNo3-->

  <div class="TrennungNo3">
    <img src="Images/Strich_320.jpg" alt="" />
  </div>
  <!--TrennungNo3-->
  
  <ul class="Programme clearfix">    
    <li class="Photoshop">   
        <img src="Images/Photoshop.png" alt="" />      
    </li>
    <li class="Illustrator">
         <img src="Images/Illustrator.png" alt="" />        
    </li>
    <li class="InDesign">      
        <img src="Images/InDesign.png" alt="" />      
    </li>
    <li class="Dreamweaver">    
        <img src="Images/Dreamweaver.png" alt="" />      
    </li>
    <li class="AfterEffects">      
        <img src="Images/AfterEffects.png" alt="" />      
    </li>
    <li class="PremierePro">      
        <img src="Images/PremierePro.png" alt="" />
    </li>
    <li class="SonyVegas">
      
        <img src="Images/SonyVegas.png" alt="" />
      
    </li>

    <li class="Cinema4D">
      
        <img src="Images/Cinema4D.png" alt="" />
      
    </li>
  </ul>


</div>
<!--Skills-->

​

有关我使用clearfix的原因，请参阅clearfix，以及您可能需要根据所获取的浏览器更改的内容。