如何將此文字放在右側

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%} #leftside {float:left; width:60%}

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

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

Answer 2

有諸如CSS網格和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>