Question

我想将三个div对齐在一行中，因为我已将左和中心div赋予float：left属性和右div以浮动右属性

但我的右侧div显示在屏幕左侧

我的代码如下

<div style="width:100%; height:100%;">
<div align="center" id="left_portion" style="display:none; position:absolute; float:left; width:10%; height:10%;"></div>
<div id="scroller" align="center" style="width:100%; height:100%; overflow:hidden; position:absolute; float:left;">
    <img src="" id="img_main" style="width:100%; height:100%; overflow:hidden;" onClick="scaleImage(event)">
</div>
<div id="right_portion" align="center" style="display:none; float:right; position:absolute;  width:10%; height:10%;"></div>
</div>

我想使用左右div作为掩蔽div，即当我点击中心div时，第二个div将进行缩放，我想显示div的特定部分，其余部分将从左边和对吧

Answer 1

如果您希望它们连续显示，为什么不使用display: inline-block？这是一个例子：http://jsfiddle.net/5y2WK/

Answer 2

位置：Absolute和Float互相覆盖。你不能两者兼得。位置：绝对意味着它将被锁定到一个位置，浮动意味着它将自动适应，不可能同时做到这两个。

<div style="width:100%; height:100%;">
 <div id="left_portion" align="center"  style="float:left; width:10%; height:10%;     background-color:#CCCCCC">

 </div>
 <div id="scroller" align="center" style="width:80%; height:100%; float:left; background-color:#444444">

 </div>
 <div id="right_portion" align="center" style="float:right; width:10%; height:10%; background-color:#CCCCCC">

 </div>
</div>

这至少对我有用。

Answer 3

首先删除绝对定位并使用浮动技术并将第2 div的宽度设置为80％而不是100％，以便有第1和第3 div加载的空间。

<div style="width:100%; height:100%;">
  <div align="center" id="left_portion" style="display:none;  float:left; width:10%; height:10%;">asdasdad</div>
  <div id="scroller" align="center" style="width:80%; height:100%; overflow:hidden; float:left;">   sdfsd
    <img src="" id="img_main" style="width:80%; height:100%; overflow:hidden;" onClick="scaleImage(event)">
  </div>
  <div id="right_portion" align="center" style="display:none; float:right;   width:10%; height:10%;">sdfsdd </div>
</div>

Answer 4

使用CSS3可以做得更简单：

的style.css：

div.main_div {
        display: flex;
        justify-content: space-between;
        display: -webkit-flex; /* for Safari */
        -webkit-justify-content: space-between; /* for Safari 6.1+ */ 
    }


div.inside_div_left, .inside_div_center, .inside_div_right {;
    }

的index.html：

<div class="main_div">
    <div class="inside_div_left"></div>
    <div class="inside_div_center"></div>
    <div class="inside_div_right"></div>
</div>

这将使内部div成为行并响应地改变它们之间的空间。有关详细信息：http://www.w3schools.com/cssref/css3_pr_justify-content.asp

一排三个div

4 个答案: