两个内嵌图像。 CSS/HTML

我正在为我的学校创建网站（它类似于比赛），但我被困在一件事上：/。我试图内联2张图片。一个是装饰，secound就像文字板。它的工作但边界不是O.o和它下面的主div（我的语言glavendrzac）。保证金正在工作，但没有边界。其唯一的 “接壤”，围绕标志：/（见下图）两个内嵌图像。 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

如果您将overflow: auto添加到#glavendrzac那么浮点数将包含在包含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

两个内嵌图像。 CSS/HTML

回答

相关问题