Question

我在文字和标题图片之间插入了一个div。请任何人都可以帮助我。我会很感激。当我放置div时，它会移到文本的后面并向上移动。我该怎么办。我发现很难添加代码文件。但这是div的重叠我的JSFIDDLE就在这里JS FIDDLE

＆＃13;

/*REVEAL LINK*/
.revela {
	width: 100%;
	text-align: center;
	height: 100px;

	background-color: #8080ff;
}
.button, .button:focus {
	background-color: black;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    font-family: 'Bree Serif', serif;
    text-transform: uppercase;
}

.button:hover {
	background-color: #8080ff; 
	border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
/*IMAGE DESIGN*/
img {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;

	/*margin-top: -50px;*/

}
.exampleClass {
     padding: 0;
     margin: 0;
}

*{
	margin: 0;
	padding: 0;
}
/*NAVBAR*/
nav {
	width: 100%;
}


/*body { 
	padding-top: 70px; 
}*/
.dropdown:hover .dropdown-menu {
  display: block;
}
.dropdown-menu {
  top: calc(100% + 9px);
}
.navbar {

	padding: 10px 0;
	margin:0;
	border-radius:0;
	border:none;
	width: 100% !important;
	/*z-index: 1;*/
	font-family: 'Bree Serif', serif;
}
.navbar-default{
	background-color: #8080ff;
	width: 100% !important; 
}
.navbar-default .navbar-header > a, .navbar-default .navbar-header > a:focus, .navbar-default .navbar-header > a:hover {
	color:white;
	font-size: 2em;
}
.navbar-header button {
	border:none;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: white;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
	background-color: transparent;
}
.navbar-default .navbar-nav > li > a {
	color: white;
	transition: color 0.5s;
	font-size: 1.1em;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover{
	color: white;
}
.navbar-default .navbar-nav>li.list:after {
	content: "";
	display:block;
	border-bottom: 2px solid white;
	transform: scale(0);
	transition: transform 0.8s ease-in;
	transform-origin: 0% 50%;
}
.navbar-default .navbar-nav>li.list:hover:after {
	transform:scaleX(1);
}
/*ABOUT COMPANY*/
.works {
	margin:30px 50px;
}		

.history, .about{
	font-family: 'Lato', sans-serif;
	color:black;
}
.history{
	font-size: 50px;
	font-weight: 700;
}
.about {
	font-size: 22px;
	font-weight: 400;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title>Allamit | Agric Engineering</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i" rel="stylesheet">
  	<link rel="stylesheet" type="text/css" href="./css/allamit.css">
</head>
<body>
<nav class="navbar navbar-default">
		<div class= "container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-demo">
	        		<span class="sr-only">Toggle navigation</span>
	        		<span class="icon-bar"></span>
	        		<span class="icon-bar"></span>
	        		<span class="icon-bar"></span>
	      		</button>
				<a href="#" class="navbar-brand navbrand">ALLAMIT</a>
			</div>
			<div class="collapse navbar-collapse" id="bs-demo">
				<ul class="nav navbar-nav navbar-right">
					<li class="list"><a href="Director/company_profile.html">ABOUT</a></li>
					<li class="list"><a href="machine_gallery/feed_mixer_hammer_mill.html">COMPANY WORKS</a></li>
					<li class="list"><a href="about/contact.html">CONTACT</a></li>        
				</ul>
			</div>
		</div>

</nav>		

<div class="col-xs-12 exampleClass">
	<img class="image" src="https://s18.postimg.org/q7qolxsmx/garri_processing.jpg">

</div>
<div class="revela">
	<a class="button" href="revealmaster/index.html">Click Here For A Presentation About The Website</a>
	<div class="clearfix"></div>
</div>
<div class="works">
	<!-- <div class="col-lg-12"> -->
		<h2 class="history">Our Company History</h2>
		<p class="about"> The company was incorporated February 1999 (RC 350443). Allamit (Nig). Limited is one of the eminent manufacturers and exporters of quality agricultural and industrial machines in Nigeria. Our company specializes in research and development and promotion of the following machines ... <a class="more" class="more" href="Director/company_profile.html">Read More</a></p>
    </div>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"
  	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  	crossorigin="anonymous"></script>
 <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/allamit.js"></script>
</body>
</html>

＆＃13;

这是删除图片时的div。似乎div在引导程序头下这是div class revela

Answer 1

在查看您的代码后，您的<div class="revela">代码

中会发生浮动

因此，您只需在<div class="clearfix"></div>代码之前添加<div class="revela">。

所以它看起来像：

希望这可以帮助你。

我的div与引导头

1 个答案: