Question

我在自己的网站上工作，在我的技能部分我应该并排2个程序，但我的问题是，这不起作用，我不知道为什么这不起作用。

我已经尝试使用Float但是我没有这么做，所以可能还有其他选择。

＆＃13;

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

＆＃13;

<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-->

＆＃13;

Answer 1

只需将width :50%设置为Programmes div的内容，并将width:100%设置为Programmes div

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

Answer 2

添加这个可以让你前进。只需编辑.Programme＆gt; div即可：p

const newState = { ...this.state.abc }; // deconstruct state.abc into a new object-- effectively making a copy
newState.xyz = 'blurg';
this.setState(newState);

Answer 3

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

＆＃13;

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

＆＃13;

<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-->

＆＃13;

请参阅http://cssmojo.com/the-very-latest-clearfix-reloaded/了解我使用clearfix的原因以及根据您要定位的浏览器可能需要更改的内容。

如何在不使用＆＃34; Float＆＃34;的情况下并排获取我的图像？

3 个答案: