2つのインラインイメージ。 CSS/HTML

私は私の学校のウェブサイトを作成しています（それはマッチのようなものですが）。私は2つの画像をインライン化しようとしています。 1つは装飾のためであり、2つはテキストのためのボードのようなものです。そして、その働きはあるものの、国境は、O.oとdiv main（私の言葉ではglavendrzac）の下を行き来していません。マージンは機能していますが境界はありません。ロゴの周りにその唯一の "縁取り"：/（下の画像を参照してください）2つのインラインイメージ。 CSS/HTML

http://prntscr.com/b0qtw7

<html> 
<head> 
    <meta charset="UTF-8"/> 
    <title>ООУ "Јосип Броз Тито"</title> 
    <link rel="stylesheet" type="text/css" href="stilovi.css"> 
</head> 
<body> 
<div id = "glavendrzac"> 

    <div class = "logopozicija"> 
     <img src="sliki/logo.png"/> 
    </div> 
    <div id = "sliki"> 

     <div class = "profesor"> 
      <img src="sliki/profesor.png" width="270px"; height="450px";/> 
     </div> 
     <div id = "tabla"> 
      <div class = "tablatekst"> 
       test 
      </div> 
     </div> 
    </div> 
</div> 

<?php 
// 
?> 
</body> 
</html>

そして、これがあるCSSコード

body 
{ 
    margin: 10px; 
} 

#glavendrzac 
{ 
    margin-left: 200px; 
    margin-right: 200px; 
    border: 2px solid black; 
    border-radius: 8px; 
} 

#sliki 
{ 
} 

.profesor 
{ 
    float:left; 
} 

#tabla 
{ 
    margin-top:50px; 
    float:right; 
    margin-left:30px; 
    border: 0px solid black; 
    border-radius:20px; 
    width: 800px; 
    background: url("sliki/tabla.png"); 
    background-size: cover; 
} 

.tablatekst 
{ 
    margin-top: 30px; 
    margin-left: 40px; 
    margin-bottom: 30px; 
    margin-right: 40px; 
}

誰かが私を助けることができます:) IDKは何が間違っていますか？

出典

2016-05-05 Ile Popivanov

#glavendrzacにoverflow: autoを追加すると、フロートはdivの中に含まれていると思います。

教授画像とテキストボックスが親コンテナ内に収まるように、さまざまな子要素の幅について考える必要があります。

ここで関与するCSSの概念は、ブロックフォーマットのコンテキストとして知られています。

参考：https://www.w3.org/TR/CSS2/visuren.html#block-formatting

#glavendrzac { 
 
    margin-left: 200px; 
 
    margin-right: 200px; 
 
    border: 2px solid black; 
 
    border-radius: 8px; 
 
    overflow: auto; 
 
} 
 
#sliki {} 
 
.profesor { 
 
    float: left; 
 
} 
 
#tabla { 
 
    margin-top: 50px; 
 
    float: right; 
 
    margin-left: 30px; 
 
    border: 1px solid black; 
 
    border-radius: 20px; 
 
} 
 
.tablatekst { 
 
    margin-top: 30px; 
 
    margin-left: 40px; 
 
    margin-bottom: 30px; 
 
    margin-right: 40px; 
 
}

<div id="glavendrzac"> 
 
    <div class="logopozicija"> 
 
    <img src="http://placehold.it/50x50" /> 
 
    </div> 
 
    <div id="sliki"> 
 

 
    <div class="profesor"> 
 
     <img src="http://placehold.it/100x450" width="100px" ; height="450px" ;/> 
 
    </div> 
 
    <div id="tabla"> 
 
     <div class="tablatekst"> 
 
     test (this needs some work) 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2016-05-05 22:11:52

2つのインラインイメージ。 CSS/HTML

答えて

関連する問題