Question

我正在尝试编码 this page 。

我不知道如何解决问题，但似乎overflow:hidden的{{1}}会使图像缩小并剪裁。如何使#bigf内的所有div在一条水平线上很好地拟合？谢谢。

HTML：

#bigf

CSS：

<html>
<head>
<title>Title</title>
<meta name="Description" content="desc">
<meta name="keywords" content="keywords">
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-2" />
<link type="text/css" href="style.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
</head>

<body>

<div id="wrap">

<div id="top">
    <div class="container">
    <h1>Name</h1>
    </div>
</div> 

<div id="bigf">
<div class="container">
<img src="hydraulik.png" class="hydra">

<div class="sm1">
<div class="textsec">SOMETHING</div>
<div class="textsec">IS SAID HERE</div>
</div>


</div>
</div>

</div>

</body>

</html>

Answer 1

尝试在css中添加以下代码：

.hydra {
    float: left;
    margin-left: 25px;
    vertical-align: top;
}

无需删除overflow:hidden只需使用vertical-align: top;即可。这样人们的图像和文字就会按预期排列到顶部。

希望这能帮到你！

Answer 2

将clearfix添加到#bigf .container。

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

将类添加到容器中。

<div class="container cf"></div>

你已经在里面放置了元素，所以我建议你阅读以下内容：What is Clearfix

Answer 3

嘿它与溢出隐藏无关。男人的形象由于div.sm1而跳下来，那里的div正浮动并且与盒子模型混乱。

根据你想要达到的目的，你可以给.sm1一个固定的最大宽度（容器大小 - 图像大小），让它也向右浮动。这应该可以解决问题。

Answer 4

使用以下代码替换container样式。

.container {
  width: 1160px;
  margin: 0 auto; 
  display: flex;
}

溢出隐藏使img下降并剪切

4 个答案: