Question

我正在为我的学校创建网站（比如匹配）但我坚持一件事：/。我想内联2张图片。一个用于装饰，而secound就像是用于文本的板。而它的工作但边界并没有降低O.o和它在一个div主要（我的语言glavendrzac）下。保证金正在运作，但没有边界。它唯一围绕徽标“接壤”：/（见下图。）

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错了。

Answer 1

如果您将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>

两个内嵌图像。 CSS / HTML

1 个答案: