2016-03-30 4 views
1

ここで何が起こっているのか分かりません。私はそれに2つのテキストを持つdivがあります。下の別のdiv - ボタンのように機能します。何らかの理由で、これは...Divは他のdiv空間に侵入しますか?

enter image description here

が起こっているここにコードがある...

<div id="container1" style="margin:auto;text-align:center;width:85%;"> 
 

 
    <span style="font-family:'Montserrat';color:white;font-size:55px;">PROFESSORES</span> 
 

 
    <br> 
 

 
    <p class="text" style="float:left;text-align:right;color:white;"><span style="font-weight:bold;">Xxxx Xxxxx Xxxxxx</span> 
 
    <br>&eacute; formada em psicologia e 
 
    <br>especializada em ensino da 
 
    <br>l&iacute;ngua inglesa, ambos pela 
 
    <br>XXXX; morou na Xxxxxxx por 
 
    <br>X anos, participou de v&aacute;rios 
 
    <br>cursos na &aacute;rea de artes e 
 
    <br>educa&ccedil;&atilde;o, culin&aacute;ria, 
 
    <br>taichichuan, xxxxxxx, 
 
    <br>t&eacute;cnicas de meditaç&atilde;o e hoje 
 
    <br>é professora e coordenadora 
 
    <br>de ensino da Xxxxxxxx.</p> 
 

 
    <p class="text" style="float:right;text-align:left;color:white;"><span style="font-weight:bold;">Xxxxxxx Xxxxx Xxxx</span> 
 
    <br>é professora e tradutora de 
 
    <br>espanhol e português, pós 
 
    <br>graduanda em Gramática da 
 
    <br>Língua Portuguesa pela XXXX, 
 
    <br>cursos de formação para 
 
    <br>professores de língua e formada 
 
    <br>em Comunicação Social. 
 
    <br>Amante do espanhol, não só 
 
    <br>porque é a sua língua materna, 
 
    <br>mas também porque adora 
 
    <br>ensinar e compartilhar não só a 
 
    <br>gramática como também 
 
    <br>curiosidades, experiências, 
 
    <br>cultura latino-americano e 
 
    <br>espanhola, filmes, costumes, 
 
    <br>expressões e receitas típicas.</p> 
 

 
</div> 
 

 
<br> 
 

 
<div class="button"> 
 

 
    <span class="label">+ METODOLOGIA</span> 
 

 
</div>

そして、これは "ボタン" のためのCSSコードですクラス...あなたが見ているように、他のdivに干渉することはないようです。

.button { 

margin: auto; 
background-color: #2C3254; 
padding: 50px; 
text-align: center; 
font-size: 60px; 
width: 60%; 

} 
+0

ここでは、背景色を設定しました。また、問題は投稿したHTMLとは関係ありません。もっとHTMLを追加できますか?またはより良いjsfiddleを作成してください.. –

+0

インベーダー部門は再び攻撃! XD –

+0

これでボタンクラスのCSSコードが追加されました。忘れました。 –

答えて

3

。 2つのp要素を浮動させるので、 'container1'は残りの要素(spanおよびbr)とボタン divのように実際に背が高く、brが配置されている場所から開始します。

あなたはボタンの上(つまり、要素の周りに浮くコンテンツ許可していません)スタイルclear: bothを使用することができ、それはそれを行う必要があり、例えば:

... 
<div class="button" style="clear:both"> 
... 

またはスペーサーとして機能するように、それ以上の新しいdivを追加し、

+0

それは働いた!私は正直なところ、なぜこれをする必要があったのか分かりませんが、うまくいきました。ごめんね。 –

+0

@TomásDornasPerone 'float:left'と 'float:right'が2つのコンテンツpに設定されている場合、その高さは外側のdivの一部ではなくなります(container1にボーダーを追加すると、 spanとbr)、ボタンはcontainer1が終了するところから直接開始します – outlyer

+0

私はこのようなことがフロートで起こったことは見たことがありません。しかし私は十分に経験しているわけではありません。ハハハ –

1

私はあなたが提供するコードで何が起こっているのかをチェックすることは困難であるので、私はあなたがそれはあなたが今取り組んでいるかのように見えるようにするために、いくつかのCSSコードを追加できるという基本的な何かを行っています。あなたはフロートから分割する必要が

.div1{ 
 
\t width: 380px; 
 
\t text-align: center; 
 
} 
 

 
.div1 p { 
 
\t display: inline-block; 
 
\t width: 187px; 
 
\t vertical-align: top; 
 
} 
 

 
.div2 { 
 
\t width: 380px; 
 
\t text-align: center; 
 
}
<! DOCTYPE html> 
 
<html> 
 

 
\t <head> 
 
\t \t <meta charset="utf-8"/> 
 
\t \t 
 
\t \t <title>Collage</title> 
 
\t \t 
 
\t \t <link rel="stylesheet" href="style.css"/> 
 
\t 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="div1"> 
 
\t \t \t <p>Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just textJust text Just text Just text Just Just text Just text </p> 
 
\t \t \t <p>Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text </p> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="div2"> 
 
\t \t \t <p>button</p> 
 
\t \t </div> 
 
\t </body> 
 
</html>

関連する問題