为什么段落不在HTML中对齐图像？ [英] Why Paragraph don't align next to Image in HTML?
本文介绍了为什么段落不在HTML中对齐图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在学习前端网页设计，并且正在尝试构建一个类似静态页面的完全响应式博客。
但是，我的问题是图片未正确对齐与该段落。
由于不要忘记跟进！图像本来应该是在第一篇文章的内容只是不要忘记跟进应与内容什么是Lorem Ipsum ..但它显示了它从哪里来。
我的问题是为什么发生这种情况？我在这里看到的解决方法但我没有得到这个问题实际发生的原因。
body {background-color：＃DCDBD9;颜色：＃2C2C2C;字体：正常100％坎布里亚，格鲁吉亚，serif;} h1 {font-size：1.5em; font-style：italic; font-weight：normal;} h1 a {color：＃747474; font：bold 0.45833em Calibri，Optima，Arial，sans-serif; letter-spacing：0.15em; text-transform：：大写; text-decoration：none;}＃page {margin：36px auto;宽度：90％;}＃nav {float：right; / * padding：42px 0 0 30px; * /}＃nav li {float：left; margin：0 0 0 5px;}。blog {clear：both; margin：50px auto 53px; width：93.75％;}。blog .main {float：left;宽度：62.88％; / * 566px / 900px * /}。blog .other {float：right;宽度：36.77％; / * 331px / 900px * /}。lede {padding：0.8em 5.333％;}。recent-entries {margin：0 auto;宽度：69.788％; / * 231 / 331px * /}。article {padding：40px 8.480％;}。date {float：left;保证金余额：-17.088％; / * 81px / 474px * / width：14.55％; / * 69px / 474px * / border：1px纯黑色; border-radius：2px;填充率：0.59％; transition-property：background;过渡时间：0.3s;过渡定时功能：缓和;}。日期：悬停{背景：＃9c3;} img，嵌入，对象，视频{最大宽度：100％;}。 margin-bottom：0.5em;保证金余额：2.531％; / * 12px / 474px * / width：48.734％; / * 231px / 474px * /} h2 {color：＃F90B6D; font-family：'Open Sans'，sans-serif; font-size：1.2em; font-weight：300;} p {color：＃222; font-family：'Open Sans'，sans-serif; font-size：0.9em; font-weight：400;}
<！ - < H1>这是头顶！ < a href =＃>阅读更多< / a> < / H1> - >< div id =page> < ul id =nav> < li>< a href =＃>关于我< / a> < /锂> < li>< a href =＃>关于博客< / a> < /锂> < li>< a href =＃>资料< / a> < /锂> < li>< a href =＃>垃圾邮件< / a> < /锂> < / UL> < div class =blog section> < h1 class =lede>回应博客< / h1> < div class =main> < div class =article> < DIV> < div class =date> 2015年9月1日< / div> < H2>什么是Lorem Ipsum？< / h2> < p> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机采用了一种类型的厨房，并将其制作成样本书。它不仅存活了五个世纪，而且还实现了电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布以及最近的桌面出版软件（如Aldus PageMaker，包括Lorem Ipsum的版本）而得到推广。< / p> < div class =figure> < p为H. < img src =http://i.stack.imgur.com/I3hYQ.pngalt => < b class =figcaption>记住这个< / b> < / p为H. < / DIV> < / DIV> < div class =date> 2015年9月5日< / div> < H2>它来自哪里？ < / H2> < p>与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。 Lorem Ipsum从16世纪开始使用的标准块在下面转载给那些感兴趣的人。 Cicero的de Finibus Bonorum et Malorum第1.10.32和1.10.33部分也以原始形式转载，并附有H. Rackham的1914年英文译本。< / p> < / DIV> < / DIV> <！ - / end.main - > < div class =other> < p>最近Enter的< / p> < div class =recent-entries> < p> 1.简单地首次登入< / p> < p为H. 2。只需第二次入场< / p> < / DIV> < / DIV> <！ - / end .other - > < / DIV> <！ - / end .blog.section - >< / div><！ - / end #page - >
解决方案
浮动元素应该在自然流量元素的代码中先行/前进。
请参阅（可在搜索引擎中找到的其他链接）： https://css-tricks.com/all-about-floats/
body {background-color：＃DCDBD9;颜色：＃2C2C2C;字体：正常100％坎布里亚，格鲁吉亚，serif;} h1 {font-size：1.5em; font-style：italic; font-weight：normal;} h1 a {color：＃747474; font：bold 0.45833em Calibri，Optima，Arial，sans-serif; letter-spacing：0.15em; text-transform：：大写; text-decoration：none;}＃page {margin：36px auto;宽度：90％;}＃nav {float：right; / * padding：42px 0 0 30px; * /}＃nav li {float：left; margin：0 0 0 5px;}。blog {clear：both; margin：50px auto 53px; width：93.75％;}。blog .main {float：left;宽度：62.88％; / * 566px / 900px * /}。blog .other {float：right;宽度：36.77％; / * 331px / 900px * /}。lede {padding：0.8em 5.333％;}。recent-entries {margin：0 auto;宽度：69.788％; / * 231 / 331px * /}。article {padding：40px 8.480％;}。date {float：left;保证金余额：-17.088％; / * 81px / 474px * / width：14.55％; / * 69px / 474px * / border：1px纯黑色; border-radius：2px;填充率：0.59％; transition-property：background;过渡时间：0.3s;过渡定时功能：缓和;}。日期：悬停{背景：＃9c3;} img，嵌入，对象，视频{最大宽度：100％;}。 margin-bottom：0.5em;保证金余额：2.531％; / * 12px / 474px * / width：48.734％; / * 231px / 474px * /} h2 {color：＃F90B6D; font-family：'Open Sans'，sans-serif; font-size：1.2em; font-weight：300;} p {color：＃222; font-family：'Open Sans'，sans-serif; font-size：0.9em; font-weight：400;}
<！ - < H1>这是头顶！ < a href =＃>阅读更多< / a> < / H1> - >< div id =page> < ul id =nav> < li>< a href =＃>关于我< / a> < /锂> < li>< a href =＃>关于博客< / a> < /锂> < li>< a href =＃>资料< / a> < /锂> < li>< a href =＃>垃圾邮件< / a> < /锂> < / UL> < div class =blog section> < h1 class =lede>回应博客< / h1> < div class =main> < div class =article> < DIV> < div class =date> 2015年9月1日< / div> < div class =figure> < p为H. < img src =http://dummyimage.com/290x400&text=Dont-Forget-To-Follow-Upalt => < b class =figcaption>记住这个< / b> < / p为H. < / DIV> < H2>什么是Lorem Ipsum？< / h2> < p> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机采用了一种类型的厨房，并将其制作成样本书。它不仅存活了五个世纪，而且还实现了电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布以及最近的桌面出版软件（如Aldus PageMaker，包括Lorem Ipsum的版本）而得到推广。< / p> < / DIV> < div class =date> 2015年9月5日< / div> < H2>它来自哪里？ < / H2> < p>与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。 Lorem Ipsum从16世纪开始使用的标准块在下面转载给那些感兴趣的人。 Cicero的de Finibus Bonorum et Malorum第1.10.32和1.10.33部分也以原始形式转载，并附有H. Rackham的1914年英文译本。< / p> < / DIV> < / DIV> <！ - / end.main - > < div class =other> < p>最近Enter的< / p> < div class =recent-entries> < p> 1.简单地首次登入< / p> < p为H. 2。只需第二次入场< / p> < / DIV> < / DIV> <！ - / end .other - > < / DIV> <！ - / end .blog.section - >< / div><！ - / end #page - >
I'm learning frontend web design and i'm trying to build a fully responsive blog like static page.
But my problem is the image are not aligning properly with the paragraph.
As the "Dont Forget to follow Up!" image was supposed to come in the first post content only that is Don't forget to follow Up should be with content What is Lorem Ipsum .. But it's showing up with Where Does it comes from.
My Question is Why Does This happens ? workaround i've seen here How to float paragraph next to image without wrapping the image? but i didn't get this why this problem actually happens.
body {
background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;
}
h1 {
font-size: 1.5em;
font-style: italic;
font-weight: normal;
}
h1 a {
color: #747474;
font: bold 0.45833em Calibri, Optima, Arial, sans-serif;
letter-spacing: 0.15em;
text-transform: : uppercase;
text-decoration: none;
}
#page {
margin: 36px auto;
width: 90%;
}
#nav {
float: right;
/*padding: 42px 0 0 30px;*/
}
#nav li {
float: left;
margin: 0 0 0 5px;
}
.blog {
clear: both;
margin: 50px auto 53px;
width: 93.75%;
}
.blog .main {
float: left;
width: 62.88%;
/* 566px / 900px */
}
.blog .other {
float: right;
width: 36.77%;
/* 331px / 900px */
}
.lede {
padding: 0.8em 5.333%;
}
.recent-entries {
margin: 0 auto;
width: 69.788%;
/* 231 / 331px */
}
.article {
padding: 40px 8.480%;
}
.date {
float: left;
margin-left: -17.088%;
/* 81px / 474px */
width: 14.55%;
/* 69px / 474px */
border: 1px solid black;
border-radius: 2px;
padding: 0.59%;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
}
.date:hover {
background: #9c3;
}
img,
embed,
object,
video {
max-width: 100%;
}
.figure {
float: right;
margin-bottom: 0.5em;
margin-left: 2.531%;
/* 12px / 474px */
width: 48.734%;
/* 231px / 474px */
}
h2 {
color: #F90B6D;
font-family: 'Open Sans', sans-serif;
font-size: 1.2em;
font-weight: 300;
}
p {
color: #222;
font-family: 'Open Sans', sans-serif;
font-size: 0.9em;
font-weight: 400;
}
<!-- <h1> This is the top header! <a href="#"> Read More </a> </h1> -->
<div id="page">
<ul id="nav">
<li><a href="#">About me</a>
</li>
<li><a href="#">About Blog</a>
</li>
<li><a href="#">Stuff</a>
</li>
<li><a href="#">Junk Stuff</a>
</li>
</ul>
<div class="blog section">
<h1 class="lede">Responsive Blog </h1>
<div class="main">
<div class="article">
<div>
<div class="date">
1 Sept 2015
</div>
<h2> What is Lorem Ipsum ?</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages , and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<div class="figure">
<p>
<img src="http://i.stack.imgur.com/I3hYQ.png" alt="">
<b class="figcaption">Remember This</b>
</p>
</div>
</div>
<div class="date">
5 Sept 2015
</div>
<h2> Where does it comes from ? </h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original
form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
</div>
<!--/end.main -->
<div class="other">
<p>Recent Enteries</p>
<div class="recent-entries">
<p>1.Simply First Entry</p>
<p>2. Simply second Entry</p>
</div>
</div>
<!-- /end .other -->
</div>
<!--/end .blog.section -->
</div>
<!-- /end #page-->
解决方案
floatting element should come first/ahead in code from element in the natural flux.
see (among others links you can find on search engines) : https://css-tricks.com/all-about-floats/
body {
background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;
}
h1 {
font-size: 1.5em;
font-style: italic;
font-weight: normal;
}
h1 a {
color: #747474;
font: bold 0.45833em Calibri, Optima, Arial, sans-serif;
letter-spacing: 0.15em;
text-transform: : uppercase;
text-decoration: none;
}
#page {
margin: 36px auto;
width: 90%;
}
#nav {
float: right;
/*padding: 42px 0 0 30px;*/
}
#nav li {
float: left;
margin: 0 0 0 5px;
}
.blog {
clear: both;
margin: 50px auto 53px;
width: 93.75%;
}
.blog .main {
float: left;
width: 62.88%;
/* 566px / 900px */
}
.blog .other {
float: right;
width: 36.77%;
/* 331px / 900px */
}
.lede {
padding: 0.8em 5.333%;
}
.recent-entries {
margin: 0 auto;
width: 69.788%;
/* 231 / 331px */
}
.article {
padding: 40px 8.480%;
}
.date {
float: left;
margin-left: -17.088%;
/* 81px / 474px */
width: 14.55%;
/* 69px / 474px */
border: 1px solid black;
border-radius: 2px;
padding: 0.59%;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
}
.date:hover {
background: #9c3;
}
img,
embed,
object,
video {
max-width: 100%;
}
.figure {
float: right;
margin-bottom: 0.5em;
margin-left: 2.531%;
/* 12px / 474px */
width: 48.734%;
/* 231px / 474px */
}
h2 {
color: #F90B6D;
font-family: 'Open Sans', sans-serif;
font-size: 1.2em;
font-weight: 300;
}
p {
color: #222;
font-family: 'Open Sans', sans-serif;
font-size: 0.9em;
font-weight: 400;
}
<!-- <h1> This is the top header! <a href="#"> Read More </a> </h1> -->
<div id="page">
<ul id="nav">
<li><a href="#">About me</a>
</li>
<li><a href="#">About Blog</a>
</li>
<li><a href="#">Stuff</a>
</li>
<li><a href="#">Junk Stuff</a>
</li>
</ul>
<div class="blog section">
<h1 class="lede">Responsive Blog </h1>
<div class="main">
<div class="article">
<div>
<div class="date">
1 Sept 2015
</div>
<div class="figure">
<p>
<img src="http://dummyimage.com/290x400&text=Dont-Forget-To-Follow-Up" alt="">
<b class="figcaption">Remember This</b>
</p>
</div>
<h2> What is Lorem Ipsum ?</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages , and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="date">
5 Sept 2015
</div>
<h2> Where does it comes from ? </h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original
form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
</div>
<!--/end.main -->
<div class="other">
<p>Recent Enteries</p>
<div class="recent-entries">
<p>1.Simply First Entry</p>
<p>2. Simply second Entry</p>
</div>
</div>
<!-- /end .other -->
</div>
<!--/end .blog.section -->
</div>
<!-- /end #page-->
这篇关于为什么段落不在HTML中对齐图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
