无法将图像放在文本旁边
我正在尝试使用引导程序创建一个响应式页面，其中图像位于文本旁边。然而，当窗口调整为较小的宽度时，图像会一直低于文本并且会显示出来吗？
以下是我面临的问题的一个例子： https://jsfiddle.net/2e6d5oq6/
这是我的HTML代码：
<body>
<div class="headerContainer">
<div class="col-lg-8 center-block">
<div class="panel panel-default">
<div class="panel-body">
<h1><strong>Resources</strong> </h1>
This page is to provide someis tincidunt.
</div>
</div> <!-- end panel panel-default -->
</div><!-- end col-lg-8 -->
</div> <!-- end introduction -->
<div class="resourceContainer">
<div class="col-lg-8 center-block">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
<div class="resource1">
<h3> Tip on having a FUN working environment</h3>
<p> <span class="name">John Yu Chi Cheng </span>   <span class="time"> 12:20PM 08-06-2015</span></p>
</div>
</div>
<div class="col-lg-7">
<div class="row">
<p class="jobDescription">
Maecenas sit amet aliquet metus. facilisis venenatis.
<a href="#" class="btn btn-default">Read More</a>
</p>
<div class="col-md-10">
<img class="image1" src="image/fun.png" width="130%" >
</div>
</div> <!-- end row -->
</div> <!-- end col-lg-7 -->
</div> <!-- end panel-body -->
<div class="panel-body">
<div class="page-header">
<div class="resource1">
<h3> Tip on having a FUN working environment</h3>
<p> <span class="name">John Yu Chi Cheng </span>   <span class="time"> 12:20PM 08-06-2015</span></p>
</div>
</div>
<div class="col-lg-7">
<div class="row">
<p class="jobDescription">
Maecenas sit amet aliquet metus. Donec tempor consequat mi ut
egestas. Etiam fringilla dui eget urna facilisis venenatis.
<a href="#" class="btn btn-default">Read More</a>
</p>
<div class="col-md-10">
<img class="image1" src="image/fun.png" width="130%" >
</div>
</div> <!-- end row -->
</div> <!-- end col-lg-7 -->
</div>
<div class="panel-body">
<div class="page-header">
<div class="resource1">
<h3> Tip on having a FUN working environment</h3>
<p> <span class="name">John Yu Chi Cheng </span>   <span class="time"> 12:20PM 08-06-2015</span></p>
</div>
</div>
<div class="col-lg-7">
<div class="row">
<p class="jobDescription">
Maecenas sit amet aliquet metus. Etiam fringilla dui eget urna facilisis venenatis.
<a href="#" class="btn btn-default">Read More</a>
</p>
<div class="col-md-10">
<img class="image1" src="image/fun.png" width="130%" >
</div>
</div> <!-- end row -->
</div> <!-- end col-lg-7 -->
</div> <!-- end pane-body -->
</div> <!-- end panel panel-default -->
</div> <!-- end col-lg-8 -->
</div> <!-- end container 2 -->
</body>
这是我的CSS代码：
.resourceContainer{
display:block;
font-size: 130%;
font-family: baskerville old face;
padding-top:3%;
margin-bottom:10%;
}
提前谢谢你：）
3 个答案:
答案 0 :(得分：0)
这里有几个问题：
首先，您需要将p元素与类jobDescription一起包含在div中，其类为col-md-*，以便该行中的两列加起来大小为12（在这种情况下，类将为col-md-2）。
第二次，您使用的图像在其两侧都有很多空白，因此Bootstrap会自动将其列向下移动到下一行，因为没有足够的空间。< / p>
您还有其他问题，包括Bootstrap无法识别的不必要的div和大小的列，但上述更改可以解决您的问题。
答案 1 :(得分：0)
请看下面的代码。
你会看到我在哪里注释了一个div包装器，还添加了一个包含open p类的div。
您也应该考虑调整图像大小。
如果您使用col-sm-xx类，则在调整大小时，两个div将并排排列...如果这对您有所帮助。
基本上......你需要做的就是这个。
在row集合2 div块内。
左/第一个宽度为... col-sm-7。
右/第二div块的宽度为... col-sm-5。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.spacer {
margin-top: 2%;
margin-bottom: 2%;
}
/*resource page*/
.resourceContainer{
display:block;
font-size: 130%;
font-family: baskerville old face;
padding-top:3%;
margin-bottom:10%;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 spacer"></div>
<div class="headerContainer">
<div class="col-lg-8 center-block">
<div class="panel panel-default">
<div class="panel-body">
<h1><strong>Resources</strong> </h1>
This page is to provide someis tincidunt. Donec faucibus
diam arcu, a posuere nunc tempus et. Aliquam
eu condimentum lacus. Phasellus ac semper nisi.
Vestibulum et nisi tristique,
</div>
</div> <!-- end panel panel-default -->
</div><!-- end col-lg-8 -->
</div> <!-- end introduction -->
<div class="resourceContainer">
<div class="col-lg-8 center-block">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
<div class="resource1">
<h3> Tip on having a FUN working environment</h3>
<p> <span class="name">John Yu Chi Cheng </span>   <span class="time"> 12:20PM 08-06-2015</span></p>
</div>
</div>
<!-- <div class="col-lg-12"> -->
<div class="row col-lg-12">
<div class="col-sm-7">
<p class="jobDescription">
Maecenas sit amet aliquet metus. Duis maximus
fermentum mi quis tincidunt. Donec faucibus
diam arcu, a posuere nunc tempus et. Aliquam
eu condimentum lacus. Phasellus ac semper nisi.
Vestibulum et nisi tristique, condimentum tellus
vitae, pellentesque quam. Curabitur quis ipsum
sagittis lectus porttitor convallis vel vitae
mauris. Quisque purus ligula, tristique at erat eget,
commodo bibendum dui. Pellentesque efficitur hendrerit
libero id lacinia. Duis porta et erat in suscipit. Etiam
id tortor quis enim feugiat efficitur. Proin nulla tortor,
lobortis vel tempus id, condimentum eget quam. Nunc
faucibus rutrum facilisis. Donec tempor consequat mi ut
egestas. Etiam fringilla dui eget urna facilisis venenatis.
<a href="#" class="btn btn-default">Read More</a>
</p>
</div>
<div class="col-sm-5">
<img class="image1 image-responsive" src="http://i.stack.imgur.com/PUvCK.png" width="100%" >
</div>
</div> <!-- end row -->
<!-- </div>--> <!-- end col-lg-7 -->
</div> <!-- end panel-body -->
<div class="panel-body">
<div class="page-header">
<div class="resource1">
<h3> Tip on having a FUN working environment</h3>
<p> <span class="name">John Yu Chi Cheng </span>   <span class="time"> 12:20PM 08-06-2015</span></p>
</div>
</div>
<div class="col-lg-7">
<div class="row">
<p class="jobDescription">
Maecenas sit amet aliquet metus. Duis maximus
fermentum mi quis tincidunt. Donec faucibus
diam arcu, a posuere nunc tempus et. Aliquam
eu condimentum lacus. Phasellus ac semper nisi.
Vestibulum et nisi tristique, condimentum tellus
vitae, pellentesque quam. Curabitur quis ipsum
sagittis lectus porttitor convallis vel vitae
mauris. Quisque purus ligula, tristique at erat eget,
commodo bibendum dui. Pellentesque efficitur hendrerit
libero id lacinia. Duis porta et erat in suscipit. Etiam
id tortor quis enim feugiat efficitur. Proin nulla tortor,
lobortis vel tempus id, condimentum eget quam. Nunc
faucibus rutrum facilisis. Donec tempor consequat mi ut
egestas. Etiam fringilla dui eget urna facilisis venenatis.
<a href="#" class="btn btn-default">Read More</a>
</p>
<div class="col-md-10">
<img class="image1" src="http://i.stack.imgur.com/PUvCK.png" width="130%" >
</div>
</div> <!-- end row -->
</div> <!-- end col-lg-7 -->
</div>
<div class="panel-body">
<div class="page-header">
<div class="resource1">
<h3> Tip on having a FUN working environment</h3>
<p> <span class="name">John Yu Chi Cheng </span>   <span class="time"> 12:20PM 08-06-2015</span></p>
</div>
</div>
<div class="col-lg-7">
<div class="row">
<p class="jobDescription">
Maecenas sit amet aliquet metus. Duis maximus
fermentum mi quis tincidunt. Donec faucibus
diam arcu, a posuere nunc tempus et. Aliquam
eu condimentum lacus. Phasellus ac semper nisi.
Vestibulum et nisi tristique, condimentum tellus
vitae, pellentesque quam. Curabitur quis ipsum
sagittis lectus porttitor convallis vel vitae
mauris. Quisque purus ligula, tristique at erat eget,
commodo bibendum dui. Pellentesque efficitur hendrerit
libero id lacinia. Duis porta et erat in suscipit. Etiam
id tortor quis enim feugiat efficitur. Proin nulla tortor,
lobortis vel tempus id, condimentum eget quam. Nunc
faucibus rutrum facilisis. Donec tempor consequat mi ut
egestas. Etiam fringilla dui eget urna facilisis venenatis.
<a href="#" class="btn btn-default">Read More</a>
</p>
<div class="col-md-10">
<img class="image1" src="http://i.stack.imgur.com/PUvCK.png" width="130%" >
</div>
</div> <!-- end row -->
</div> <!-- end col-lg-7 -->
</div> <!-- end pane-body -->
</div> <!-- end panel panel-default -->
</div> <!-- end col-lg-8 -->
</div> <!-- end container 2 -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
答案 2 :(得分：0)
包装元素时遇到问题。
<div class="row">
<div class="col-md-4 col-xs-4">
<p class="jobDescription">
Your description here
</p>
</div>
<div class="col-md-8 col-xs-8">
<img class="image1 img-responsive" src="http://i.stack.imgur.com/PUvCK.png">
</div
</div> <!-- end row -->
根据您的要求更改col-md- *。在小屏幕中，您需要使用col-xs- *来保持并排。
希望这有帮助。
干杯！
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？