如何在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

回答

相关问题