**已关闭。**此问题需要debugging details。当前不接受答案。
编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
3天前关闭。
此帖子已于3天前编辑并提交审核，未能重新打开帖子：
原始关闭原因未解决
Improve this question
我是一个初学者，当谈到html和CSS，我试图摆脱中间的空白。
<html>
<article>
<header class="post">
<h3><a id="Week5"> </a> Week 5 - Using floats</h3>
<p> Published on <time datetime="2022-10-29"><em> October 29th, 2022</em></time></p>
</header>
<div class="fltlt">
<div class="images">
<mg src="https://i.ibb.co/m89yhB9/fontimage.jpg" alt="Da font website">
</div>
<div class="texts">
<p class="week5exp"> This is what I learned in week 5 </p>
<aside>
<ol>
<li> I learned how to use floats to wrap text around an image </li>
<li> Instead of using google fonts I used a custom made font from<a href="https://www.dafont.com" target="_blank"> Da font</a></li>
<li><mg src="https://i.ibb.co/V3jmGDd/dafont.png" alt="Screenshot of web fonts"></li>
</ol>
</aside>
</div>
</div>
<p class="clear"><a href="#top">Go to top</a></p>
</article>
<html>这是css
.fltlt {
display: flex;
}
.clear {
clear: both;
}
.week5post {
float:right;
margin-top: 2px;
margin-bottom: 2px;
background-color: #ADD8E6 ;
}
.Week5post{
font-size: 12px;
margin-top: 2px;
margin-bottom: 2px;
background-color: #ADD8E
}
.week5exp{
margin-top: 2px;
margin-bottom: 2px;
background-color: #ADD8E6;
font-weight: bold;
}
images img {
display: block;
max-width:284px;
}我试着用浮动，但不起作用
因为我是新来的，所以知识实在有限.
网站的真实的预览--〉https://i.stack.imgur.com/RUC34.png我从img标签中删除了“i”，因为它不起作用
2条答案
按热度按时间mkh04yzy1#
好吧，你同时使用flex和float，这没有任何意义，因为使用flex，可以更容易地设计灵活的响应布局结构，而不使用float或定位。
你的情况有两种。
1.从css中删除float和clear属性，并使用justify-content：flex-start（在.fltlt类中）。
1.如果您想使用float，而不是float：right，那么请使用float：left，希望这样可以工作。
看起来你在学花车。
go through this link，它涵盖了所有关于浮动的内容。
ncecgwcz2#
好吧，你同时使用flex和float，这没有任何意义，因为使用flex，可以更容易地设计灵活的响应布局结构，而不使用float或定位。
你的情况有两种。
1.)从你的
css中删除float和clear属性，并使用.fltlt类中的justify-content:flex-start。2.)如果希望使用float，而不是
float:right，请使用float:left，希望这样可以工作。看起来你在学花车