我正在尝试编写此页面的代码。
我不知道如何解决这个问题，但似乎overflow:hidden #bigf使图像下降和剪切。如何使#bigf中的所有div都很好地适合一条水平线？谢谢。
.HTML：
<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>
.CSS：
* {
margin:0px;
padding:0px;
}
body {
font-family: 'Exo 2', sans-serif;
}
#wrap {
position: relative;
width: 100%;
overflow: hidden;
background: #fff;
}
#top {
height:60px;
}
.container {
width:1160px;
margin:0 auto;
}
#bigf {
height:380px;
background: url(bf.jpg) right no-repeat black;
overflow:hidden;
}
.textsec {
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.8);
display: inline-block;
color: #FFF;
font-weight: 600;
padding: 10px 25px;
outline: 2px solid rgba(51, 51, 51, 0.2);
text-shadow: 2px 3px 0px #000;
margin: 0px 0px 10px;
float:right;
font-size:26px;
}
.hydra {
margin-left:25px;
float:left;
}
.sm1 {
margin-top:150px;
}
向#bigf .container添加一个clearfix。
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
并将类添加到容器中。
<div class="container cf"></div>
您在那里浮动了元素，因此我建议您阅读以下内容： 什么是Clearfix
尝试在 css 中添加以下代码：
.hydra {
float: left;
margin-left: 25px;
vertical-align: top;
}
无需删除overflow:hidden只需使用vertical-align: top;即可，以便人员图像和文本将按预期与顶部对齐。
希望对您有所帮助！
嘿，
它与隐藏溢出无关。男人的形象跳下来是因为div.sm1里面的div漂浮并弄乱了盒子模型。
根据您想要实现的目标，您可以为 .sm1 提供固定的最大宽度（容器大小 - 图像大小），并让它也向右浮动。这应该可以解决问题。
将
container样式替换为以下代码。
.container {
width: 1160px;
margin: 0 auto;
display: flex;
}