所以,我正在努力解决我的HTML代码中发生的奇怪事情。
我一直试图这样做3天或更长时间,但我根本找不到问题'。
.variola {
max-width: 100%;
margin-top: 0.5em;
margin-bottom: 1em;
-webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 0px 20px;
background: white;
border: 1px solid #CCC;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
padding: 8px;
"
}
</style> <style> .cerculet {
display: block;
font-size: 120%;
line-height: 145%;
width: 1.6em;
height: 1.6em;
text-align: center;
border-radius: 50%;
background-color: black;
color: white;
white-space: nowrap;
}
</style> <style> .introducere {
display: table-cell;
vertical-align length: 5;
padding-left: 3em;
padding-top: 0.1em;
}
&#13;
<!DOCTYPE html>
<html>
<head>
<!-- Aici va fi scris orice cod CSS pentru ca ulterior sa fie "preluat" intr-un
mod indirect de catre codul HTML pentru imbogatirea paginii web. -->
<title>10 cele mai periculoase boli care au facut istorie</title>
</head>
<body>
10 cele mai periculoase boli care au facut istorie
<!-- Tot codul de la tag-ul "body" deschis pana la "body" inchis este strict
codul pentru pagina web.Cei in head sub tag-ul "style" este cod in CSS si
nu va aparea in pagina web,ci va "imbogati" intr-un mod indirect codul html -->
<p style="text-align: left">
<img align="absmiddle" src="http://s2.postimg.org/6zkw8piph/Time.png">26-Martie-2015
<!-- " " este un cod important folosit pentru a crea un blank(spatiu alb)
intre 2 caractere -->
<img align="absmiddle" src="http://s29.postimg.org/tkzbm9nwz/Domeniu.png">Biologie
<br>
<img align="absmiddle" src="http://s22.postimg.org/k7tec39x9/Tags.png">Tags: Pandemii, cele mai periculoase</p>
<hr noshade size="2" style="text-align: left" width="47%">
<br>
<!-- Cu ajutorul tag-ului "hr" se pot introduce linii in pagina web.
"noshade" inseamna ca linia nu o sa aiba contur. -->
<h2></h2>
<div class="cerculet">
<div>
<h2>1 </h2>
<div>
<h2>
<big style="font-weight: bold">A ucis mai mult de 300 de
milioane de oameni<br>
din intreaga lume in secolul al XX-lea si pe cei<br>
mai multi locuitori nativi ai Americii.</big>
<!-- Exact ceea ce spuneam mai sus:codul CSS va fi "preluat" indirect din "head"
si va fi introdus in codul html,combinand cele 2 limbaje. -->
<!-- :-) --></h2>
</div>
</div>
</div>
<br>
<div>
Variola(cunoscuta si sub numele latin "Variola" sau "Variola vera") este o boala contagioasa
<br>unica oamenilor.Variola este cauza fie de virusul numit Variola Major,fie de cel numit Variola
<br>minor.Forma mai letala,V. Major,are o mortalitate de 30-35%,pe cand V. Minor este o forma
<br>mai usoara a bolii numita alastrim si ucide ~1% din victimele sale.Efectele secundare
<br>de termen lung pentru supravietuitori includ cicatrici pe piele.Alte efecte secundare ocazionale
<br>includ orbire datorita ulcerului de cornee si infertilitate la persoanele de sex masculin.
</div>
<!-- Tag-ul "br" sectioneaza textul nostru din pagina web in paragrafe. -->
<br>
<br>
<div>
<b>Variola a ucis aproximativ 60 de milioane de europeni,</b> incluzand cinci monarhi
<br>care conduceau Europa in secolul al XVIII-lea.Pana la 30% din cei infectati,80% fiind copii sub 5
<br>ani,au murit datorita acestei boli si inca o treime din supravietuitori au devenit orbi.
</div>
<br>
<br>
<div>
Cat despre tarile din America,dupa primul contact cu europenii si africanii,unii au crezut ca rata
<br>de mortalitate de 90-95% a populatiei native din Lumea Noua a fost cauza de boala Lumii Vechi.
<br>Se suspecteaza ca variola a fost principalul vinovat si raspunzator pentru uciderea a aproape toti
<br>locuitorii nativi ai Americii.In Mexic,cand aztecii s-au angajat in rascoala impotriva lui Cortés,
<br>depasiti numeric,spaniolii au fost fortati sa fuga.In timpul luptei,un soldat spaniol purtator de
<br>variola a murit.Dupa lupta,aztecii au contractat virusul din cadavrele invadatorilor.Cand Cortés
<br>s-a intors in capitala,variola a devastat populatia azteca.A ucis o mare parte din armata azteca,
<br>imparatul si 25% din populatia normala.Ulterior,Cortés a infrant cu usurinta aztecii si a intrat in
<br>Tenochtitlán unde a aflat ca variola a ucis mai multi azteci decat au ucis tunurile.
</div>
<br>
<br>
<div>
Variola a fost responsabila pentru aproximativ 300-500 de milioane de decese in secolul al XX-lea.
<br>Nu mai tarziu de 1967, Organizatia Mondiala a Sanatatii (OMS) a estimat ca 15 milioane de persoane
<br>au contractat virusul si ca alte doua milioane au murit in acel an.Dupa campanii de vaccinare incheiate
<br>cu succes in timpul secolelor XIX si XX,OMS-ul a oficializat eradicarea variolei in 1979.Pana in ziua de
<br>astazi,variola este singura boala infectioasa care a fost complet eradicata din natura.
</div>
<img class="variola" src="http://s3.postimg.org/cb0l49sw3/Variola.jpg" style="position:absolute; left:150px;">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="cerculet">
<div style="font-family: Cambria; font-size: 120%">
2
</div>
</div>
<!-- Aici am folosit CSS-ul pentru a da un stil imaginii urmat de codul
html specific imaginii "style="position...." pentru a aseza imaginea in pozitia
dorita de mine -->
</body>
</html>
&#13;
正如你所看到的,在数字1(黑色,圆圈着色)之后,有很多我不想要的空间。
对齐也不好。我使用了很多 
和<br>
,因为我无法找到一种方法将文字放在数字1之后我试图建立一个网站&#34;对于一个学校项目,我被允许看到其他网站,以鼓励&#34;我自己。你可以查看http://www.oddee.com/item_90608.aspx
然后看看我正在尝试&#34;复制&#34;以某种方式。
请帮忙。
答案 0 :(得分:0)
简而言之,您希望float: left
数字/圈,以便内容环绕它。您还有几个不必要的元素,就像您提到的那样,不必要的
元素 - 下面,我已经将示例清理为一个简单的工作示例。
.cerculet {
display: block;
}
.cerculet:after {
display: block;
clear: both;
content: ' ';
}
.cerculet p{
font-weight: bold;
}
.cerculet h2{
font-size: 120%;
line-height: 145%;
width: 1.6em;
height: 1.6em;
text-align: center;
border-radius: 50%;
background-color: black;
color: white;
white-space: nowrap;
float: left;
margin-right: 15px;
}
<div class="cerculet">
<h2>1 </h1>
<p>A ucis mai mult de 300 de milioane de oameni din intreaga lume in secolul al XX-lea si pe cei mai multi locuitori nativi ai Americii.
</p>
</div>
<p>Variola(cunoscuta si sub numele latin "Variola" sau "Variola vera") este o boala contagioasa unica oamenilor.Variola este cauza fie de virusul numit Variola Major,fie de cel numit Variola minor.Forma mai letala,V. Major,are o mortalitate de 30-35%,pe cand V. Minor este o forma mai usoara a bolii numita alastrim si ucide ~1% din victimele sale.Efectele secundare de termen lung pentru supravietuitori includ cicatrici pe piele.Alte efecte secundare ocazionale includ orbire datorita ulcerului de cornee si infertilitate la persoanele de sex masculin.
</p>
<p><b>Variola a ucis aproximativ 60 de milioane de europeni,</b> incluzand cinci monarhi care conduceau Europa in secolul al XVIII-lea.Pana la 30% din cei infectati,80% fiind copii sub 5 ani,au murit datorita acestei boli si inca o treime din supravietuitori au devenit orbi.
</p>