如何将2个div左右放在一个回合上?

哈西卜·利亚卡特(Haseeb liaqat)

就像这张照片所示,我正在尝试,但是什么也没发生,该怎么办?

在此处输入图片说明

滑杆

我在这里

          <div class="carousel-inner" role="listbox">

         <div class="item active pic">

            <div class="container1 container">

            <h1><a href="#">A WORLD OF TOMORROW </a></h1>
                   <h2><a href="#">SEEKING INSPIRATION AND EQUILIBRIUM IAGE</a></h2>
                   <p><a href="#">Bringing together members of the public with leaders and experts from around the globe to discuss emerging issues and envision a brighter future together</a></p>
         </div>
        <img src="img/SOT_banner1.jpg" >
         </div>
            <div class="item pic">
              <div class="container1 container">
                <h1><a href="#">A WORLD OF TOMORROW </a></h1>
                  <h2><a href="#">SEEKING INSPIRATION AND EQUILIBRIUM IN A NEW AGE</a></h2>
                    <p><a href="#">11-12 March, 2017</a></p>
               </div>
                <img src="img/SOT_banner2.jpg" >
              </div>


            <div class="item pic">
              <div class="container1 container">
                <h1><a href="#">A WORLD OF TOMORROW </a></h1>
                  <h2><a href="#">SEEKING INSPIRATION AND EQUILIBRIUM IN A NEW AGE</a></h2>
                    <p><a href="#">Pak-China Friendship Centre</a></p>
            </div>
              <img src="img/SOT_banner3.jpg" >
             </div>

            <div class="item pic">
              <div class="container1 container">
                <h1><a href="#">A WORLD OF TOMORROW </a></h1>
                    <h2><a href="#">SEEKING INSPIRATION AND EQUILIBRIUM IN A NEW AGE</a></h2>
                    <p><a href="#">More than 40 panel discussions, debates, interactive workshops, performances and much, much more</a></p>
             </div>
             <img src="img/SOT_banner4.jpg" >
             </div>


           </div>

          </div>
       </div>

      <!-- slider-->

CSS在这里

      .container1{
            position:absolute;
            width:40%;
            height:auto;
            margin-top:150px;
            text-align:center;}
            .pic{
                width:100%;
                position:relative;}
        .upper{
            position:relative;
            width:30%;
            height:500px;
            background-color:#F00;
            float:right;}
阿贾明

您要复制的网站是建立在Joomla上的。因此,他们可能会将Dj- imagesliderGk_university模板一起用作滑块为了使该主题和插件正常工作,您需要安装Joomla或使用其他CMS查找替代解决方案(如果您使用CMS)。

您提供的代码显然缺少其他说明。

如果您只是追求滑块,请查看Bootstrap轮播示例以下是补充外部链接的示例代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="first-slide" src="http://cdn.images.express.co.uk/img/dynamic/128/590x/kittens-615454.jpg" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Example headline.</h1>
          <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="second-slide" src="http://cdn.images.express.co.uk/img/dynamic/128/590x/kittens-615454.jpg" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Another example headline.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="third-slide" src="http://cdn.images.express.co.uk/img/dynamic/128/590x/kittens-615454.jpg" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>One more for good measure.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何概括一个静态的回合?

如何将一个div覆盖在另一个div上

如何将图像放在另一个

如何将div放在另一个div的下面(重叠另一个div)?

如何将两个按钮放在一个奇异的窗口中?

如何将文本放在另一个div的div底部

我如何将两个ngFor放在一个div中

如何将“子类”放在一个类中

当两个div都使用自动边距居中时,如何将一个div放在另一个之上?

如何将一个值放在另一个列表中?

如何将两个不同的数组放在一个数组中

如何将字幕div放在另一个非字幕div的后面?

如何将浮动div和左右div推向中间一个

如何将一个图像放在另一个图像之上?

如何将一个div移到另一个div的前面?

如何将一个div放在另一个下面

如何将这个 div 放在另一个旁边?

如何将两个函数调用放在一个 HTML 文件中?

如何将 valueLegend 放在 Amchart 的 Ammap 的另一个 div 中?

如何将两个灵活的数组放在一个结构中?

我如何将一个 div 放在一边与一边对齐?

如何将 2 个 div 从左右分开?

如何将一个 div 框放在另一个 div 框的正下方?

如何将两个 h3 标签和一个 div 放在同一行?

如何将左右两个 QFrame 放在一起?

如何将一个元素放在 div 中其他元素的右侧?

如何将较小的 div 的边框底部放在另一个较大的 div 的边框底部的顶部?

如何将一个文本放在另一个下面?- 颤振

如何将多个参数放在一个 $ 中