jquery - 无法将图像放在文本旁边

标签 jquery html css twitter-bootstrap

我正在尝试使用 Bootstrap 创建一个响应式页面，其中图像位于文本旁边。但是，图像一直低于文本，并且在将窗口调整为更小的宽度时会消失吗？

这是我面临的问题的示例: 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> &nbsp <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> &nbsp <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> &nbsp <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%;
}

提前谢谢你:)

最佳答案

看看下面的代码。您会看到我在哪里注释掉了一个 div 包装器，还添加了一个包装打开的 p 类的 div。您也应该考虑调整图像大小。

如果您使用 col-sm-xx 类，则两个 div 在调整大小时将并排放置很长时间...如果这对您有帮助的话。基本上...您在这里需要做的就是:

  • 在 row 中设置 2 个 div block 。
  • 左边/第一个宽度为... col-sm-7。
  • 右侧/第二个 div block 的宽度为... 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> &nbsp <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> &nbsp <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> &nbsp <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>

enter image description here

关于jquery - 无法将图像放在文本旁边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31106207/

上一篇：html - 响应式背景图像 bootstrap 3 asp.net 4.5

下一篇：html - 之前使用伪类对 css 标签进行分组(悬停)

相关文章：

javascript - 如何优化此 Javascript 函数？

javascript - 如何在不刷新整个 html 页面的情况下刷新动态表

javascript - 如何在 javascript 中以正确的方式编写此代码

javascript - jquery 输入尾部斜杠之谜(消失了!)

html - 最大宽度和自动换行在 IE8 中不起作用

javascript - 如何将 HTML <canvas> 数据发送到服务器

html - default body margin，我没有设置，但是它有默认值8px，如何获取这个值？

IE 中的 Jquery 悬停背景闪烁

javascript - 如果使用树内元素上的单击处理程序将其删除，DOM 树将保留在内存中

javascript - jquery选择器函数参数

©2024 IT工具网  联系我们