Question

我试图将此段放在我的无序列表的右侧。我现在面临的问题是右边的文字被迫低于li。我设法让它在右侧，但我无法设法达到相同的“高度”。

代码是否有帮助。

img{
    height: 200px;
    width: 250px;
    border: solid green 1px;
    margin-top: 20px;

}

aside#Asid_vilkaviär{
    width: 30%;
    float: right;
    margin-right: 150px;


}

<div class="container">
  <div class="argumentbild_tjänst">
      <img src="miljövänlig_städning_508502626.jpg">
      <ul>
          <li> Glöm dålig luft </li>
          <li> Trevligare omgivning</li>
          <li> Roligare vardag </li>
          <li> Kompetenta och välutbildade medarbetare </li>

      </ul>
    <aside id="Asid_vilkaviär">
      <h1> Vilka vi är </h1>
      <p> Rena-Sopkärlet AB leds av företagets två grundare, Mille Tarp och Magnus Dahl. Företaget består att kunniga och skickliga medarbetare som genom åren har många lyckade
          rengörningar av soptunnor bakom sig. Det är alltid kul att uppskattas för sitt arbete och vi har haft många tillfällen att njuta av nöjda kunder. </p>
    </aside>
  </div>
</div>

Answer 1

将左侧部分保留在DIV中并将其css设置为#leftside {float:left; width:60%}

＆＃13;

   img{
        height: 200px;
        width: 250px;
        border: solid green 1px;
        margin-top: 20px;
    }

   #leftside {float:left; width:60%}

    aside#Asid_vilkaviär{
        width: 40%;
        float: right;
       
    }

＆＃13;

  <div class="container">
    <div class="argumentbild_tjänst">
        <div id="leftside">
        <img src="miljövänlig_städning_508502626.jpg">
        <ul>
            <li> Glöm dålig luft </li>
            <li> Trevligare omgivning</li>
            <li> Roligare vardag </li>
            <li> Kompetenta och välutbildade medarbetare </li>

        </ul>
      </div>
      <aside id="Asid_vilkaviär">
        <h1> Vilka vi är </h1>
        <p> Rena-Sopkärlet AB leds av företagets två grundare, Mille Tarp och Magnus Dahl. Företaget består att kunniga och skickliga medarbetare som genom åren har många lyckade
            rengörningar av soptunnor bakom sig. Det är alltid kul att uppskattas för sitt arbete och vi har haft många tillfällen att njuta av nöjda kunder. </p>
      </aside>
    </div>
</div>

＆＃13;

Answer 2

有更新/现代/新标准的风格标准方法，如css grid和flexbox，可以通过各种优势进行排序，例如响应性（适用于移动设备查看）和高度。我注意到“身高”意味着你所欣赏的答案中的其他内容。这是使用网格做你想做的事的另一种方式。

/* This here takes care of all the layout. The following child elements just fold into this. This will also give you equal height for the columns irregardless of the content either sides */
.argumentbild_tjänst {
  display: grid;
  grid-template-columns: 3fr 6fr;
}

img{
    height: 200px;
    width: 250px;
    border: solid green 1px;
    margin-top: 20px;
}

/* There is no need to use percentages to determine size. The fr units took care of that I am using the # to color the text and background. all the layout was already taken care off */
#leftside {
  background: #de2;
  color: #000;
  padding: 10px;
}

aside#Asid_vilkaviär{
  background: #a03;
  color: #fff;
  padding: 10px;
}

<!-- Your html remains instact but could also be reduced using the modern methods. Doesnt matter anyway --> 
 <div class="container">
    <div class="argumentbild_tjänst">
        <div id="leftside">
        <img src="https://images.pexels.com/photos/442584/pexels-photo-442584.jpeg">
        <ul>
            <li> Glöm dålig luft </li>
            <li> Trevligare omgivning</li>
            <li> Roligare vardag </li>
            <li> Kompetenta och välutbildade medarbetare </li>
        </ul>
      </div>
      <aside id="Asid_vilkaviär">
        <h1> Vilka vi är </h1>
        <p> Rena-Sopkärlet AB leds av företagets två grundare, Mille Tarp och Magnus Dahl. Företaget består att kunniga och skickliga medarbetare som genom åren har många lyckade
            rengörningar av soptunnor bakom sig. Det är alltid kul att uppskattas för sitt arbete och vi har haft många tillfällen att njuta av nöjda kunder. </p>
      </aside>
    </div>
</div>

如何将此文本放在右侧

2 个答案: