我页面的超大屏幕上有一个h1,p和一个用作徽标的图像。 h1和p的位置是:粘性,这是我不想要的东西,但是当我删除该样式时,图像会向下移动并与我的导航栏混淆。
我尝试更改位置:.jumbotron流体,巨型字词,img容器的样式,但是这些都没有使img返回正常位置而没有使h1 / p(jumbowords)具有粘性。
我已经在这个小提琴中复制了这个问题:https://jsfiddle.net/Kenneth1026/18ocv062/7/
HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<div class="jumbotron jumbotron-fluid">
<div class="jumbowords">
<h1 id="Title">K&C Transmissions</h1>
<p>San Jose, CA</p>
</div>
<!--wrapping the img in a container allows us to float the container-->
<div class="img-container">
<img src="data:image/png;base64,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">
</div>
</div>
<!--Navigation bar-->
<nav class="navbar navbar-inverse">
<ul class="nav nav-justified">
<li class="active"><a class="hvr-sweep-to-right hvr-wobble-top" href="index.html">Home</a></li>
<li><a class= "hvr-sweep-to-right hvr-wobble-top" href="aboutUs.html">About us</a></li>
<li><a class= "hvr-sweep-to-right hvr-wobble-top" href="Contact.html">Contact</a></li>
</ul>
</nav>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
CSS
.jumbotron-fluid
{
margin:0 auto;
position:static;
background-color:#f4f8ff;
height:20em;
color:#000666;
font-family: 'Barlow Condensed', sans-serif;
}
.jumbowords
{
position:fixed;
font-family: 'Barlow Condensed', sans-serif;
font-style:italic;
/*color:#000666;*/
margin:0 auto;
}
.navbar
{
text-align: center;
background-color:#000666;
/*border-bottom:5px solid #f4f8ff;*/
border-bottom: 5px solid #f2e319;
margin-left:0 auto;
margin-top:0;
position:static;
overflow:hidden;
}
li a
{
font-family: 'Barlow Condensed', sans-serif;
font-size:22px;
width:100%;
margin:0 auto;
padding-left:10px;
font-style:italic;
}
.navbar-inverse
{
border-radius:0;
box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, 0.5);
}
.img-container {
float: right;
margin-top:-20px;
margin-right:20px;
position:static;
}
答案 0 :(得分:0)
将图像的src直接放置在图像容器中,并在其自己的div中标题下方。我将图像容器更改为图像响应,但是根据您的喜好使用了其中一种。
<img class="img-responsive"src="http://yourreallylongurl" />
<div class="img-title">
<h1> K&C Transmissions </h1>
<h3> San Jose, CA </h3>
</div>
假设是,您有一个图片标题CSS。您很有可能会这么做。
我将废弃Jumbotron部件,并使用图像响应型或图像标题类作为图像,但是我想这是您的偏好。
答案 1 :(得分:0)
我更改了一些定位,以便(我相信)为您提供想要的东西。
删除巨型单词的固定位置,以便它们随页面滚动。
您可以将图像放置在其父对象上,而不是浮动图像。 -将巨型轰炸机的位置设置为相对,以便您可以轻松定位其子级。
.jumbotron-fluid { position: relative; }
-这样,您可以使用“绝对”将元素定位在其中,并使用top和right属性来定位图像容器。
.img-container {
position: absolute;
right: 0;
top: 0;
}