Question

我想并排创建三个div，以便我想在每个div中为不同的照片集添加虚拟灯箱。现在我已经尝试了很多，但我无法创造一个以下是代码 -

            <div id="content-4">

                           <!--main content-->
      <div>
        <h3><span>Jumbo Events</span> </h3>

        <!-- About company -->
                    <div style="">

                        <div id="wrapper">
  <div id="first">first</div>
  <div id="second">second</div>
  <div id="third">third</div>
</div>


</div>
    <script type="text/javascript">
        var $VisualLightBoxParams$ = {autoPlay:true,borderSize:21,enableSlideshow:true,overlayOpacity:0.4,startZoom:true};
    </script>
    <script type="text/javascript" src="visuallightbox.js"></script>


   </div>

以下是每种风格 -

   #wrapper {
  width:1000px;
  clear:both;
}
#first {
  background-color:red;
  width:310px;
  height: 240px;
  float:left;
}
#second {
  background-color:blue;
  width:310px;
  height:240px
  float:left;
}
#third {
  background-color:#bada55;
  width:310px;
  height:240px;
  float:left;
}
#content-4
{
        height:325px;
        width:1016px;
        margin:5px auto ;
        background-color:#FFFFCC ;
        padding:18px ;
        margin-left:2px ;
        border:1px solid #C8C8C8;
        border-collapse:collapse;

}

现在，通过上面的代码，我看到每个div都放在另一个下面。

Answer 1

如果您确定;错过了#second { background-color:blue; width:310px; height:240px; float:left; }，那么您的css语法错误JSFiddle

{{1}}

Answer 2

;中缺少#second。

这是工作JSFiddle。

Answer 3

尝试使用CSS显示in-line block - 例如：

.wrapper div {
  display: inline-block;
}

如何在另一个div内并排放置三个div

3 个答案: