如何在HTML中使用Float-Left和Flot-Right CSS

-1

我是CSS和HTML的學習者，我有一個任務使用Float-Left和Float-Right創建HTML和CSS文件。如何在HTML中使用Float-Left和Flot-Right CSS

這裏是我想創建

我已經做了使用HTML和CSS的一切，但我沒能顯示上面

這裏的圖像作爲顯示的是輸出的圖像我的代碼

這裏是我的CSS代碼

body{ 
    background-color:#666; 

    font-family:"Comic Sans MS", cursive; 
} 

    h1{ 
     color:#FFF; 
    } 
#color{ 
    border:dotted 2px #F90; 
    background-color:black; 
    width:670px; 
    margin:0 auto; 
    alignment-adjust:central; 

} 

.float-left{ 
    display:block; 
    background-color:white; 
    margin:20px 50px 20px px; 
    padding:20px; 
    float:none; 
} 
.white{ 
background-color:white; 
    border:solid 1px red; 
    margin:15px 40px 15px 40px; 
    padding:2px; 
    font-style:italic; 
} 
.purple{ 
    background-color:white; 
    border:solid 1px red; 
    margin:15px 40px 15px 40px; 
    padding:2px; 
    font-style:italic; 

}

這裏是HTML代碼

<body> 

    <!--<div class="background">--> 
    <div id="color"> 
    <div id="float-left"> 
    <h1>Float Left</h1> 
    <div class="white"> 

     <div class="float-left"><img class="" src="https://i.ytimg.com/vi/EQ_mYstNGwg/maxresdefault.jpg" width="93" height="77" alt="img" /> 
     </div> 
     <p> thiojds jeifwk mskodiw dmkmx wmsoak.dwsqksmi wnsmakxn,dwenddjewjn,wksmdwdwm,dwkkmsakwi,iwdjwkiw.dwjidjwwij 
     .wijdksxkmddos. 
     sdsjkjie nennnwj snjdnwinda wqndjf sdnjiajanx jssnxjnxsnxs asnjxsnxssjxnss asdnjxnn nsjndcd dkmcdkdi ewin wjdke jndiisn dweidns iwqjss wiji pqw9sm.sdjdwqi eewiow oqskawiqo djaskd,ssssssssssssssswi isssssssseiw kdkddjmsqo ejfnjf fndjfow wkm.dmewomdiwq oqwsk widsie oqwsqkiwj ksiw assjjdi wqijdi wiqojid wddid wkdi qoiasjkdj asjidjs iojdskdkso odjosij</p> 

     </div> 
     </div> 
     <div class="float-right"> 
    <h1> Float Right</h1> 
    <div class="purple"> 
     <div class=""><img class="" src="https://i.ytimg.com/vi/EQ_mYstNGwg/maxresdefault.jpg" width="88" height="76" alt="img" /> 
     </div> 
      <p> thiojds jeifwk mskodiw dmkmx wmsoak.dwsqksmi wnsmakxn,dwenddjewjn,wksmdwdwm,dwkkmsakwi,iwdjwkiw.dwjidjwwij 
      .wijdksxkmddos 
      .sdsjkjie nennnwj snjdnwinda wqndjf sdnjiajanx jssnxjnxsnxs asnjxsnxssjxnss asdnjxnn nsjndcd dkmcdkdi ewin wjdke jndiisn dweidns iwqjss wiji pqw9sm.sdjdwqi eewiow oqskawiqo djaskd,ssssssssssssssswi isssssssseiw kdkddjmsqo ejfnjf fndjfow wkm.dmewomdiwq oqwsk widsie oqwsqkiwj ksiw assjjdi wqijdi wiqojid wddid wkdi qoiasjkdj asjidjs iojdskdkso odjosij</p> 
    </div> 
      </div> 
      </div> 


</body>

這裏是JsFiddle

來源

2017-03-08 sunny

使用此：

.post-container { 
 
    margin: 20px 20px 0 0; 
 
    border: 5px solid #333; 
 
    overflow: auto 
 
} 
 
.post-thumb { 
 
    float: left 
 
} 
 
.post-thumb img { 
 
    display: block 
 
} 
 
.post-title { 
 
    font-weight: bold; 
 
    font-size: 200% 
 
}

<div class="post-container">     
 
    <div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div> 
 
    <div class="post-content"> 
 
     <h3 class="post-title">Post title</h3> 
 
     <p>post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post descdesc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post descdesc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post descdesc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post descdesc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc </p></div> 
 
</div>

來源

2017-03-08 06:29:01

謝謝陽光明媚:) –

非常感謝你 – sunny

歡迎光臨！ :) –

.float-left{ 
    display:block; 
    background-color:white; 
    margin:20px 50px 20px px; 
    padding:20px; 
    float:none; 
}

要向左浮動，您必須給float的值left而不是none。

要正確地浮動，您需要爲您的float-right類編寫一些規則。

來源

2017-03-08 06:20:59 Quentin

謝謝你幫助我。你能爲我編輯我的小提琴嗎？ – sunny

你把CSS屬性float: left你想要把右邊要放在左邊的圖像和圖像的財產float: right上。

和幾個建議，哥們。不需要將<img>放置在<div>之內，通過此操作，您可以將float屬性放置在img元素本身上，而不是放在其父div上（因爲它可能會破壞佈局）。

來源

2017-03-08 06:54:33 Yoan

如何在HTML中使用Float-Left和Flot-Right CSS

回答

相關問題