0

我想将三个 div 对齐在一行中，因为我已将左侧和中心 div 设置为 float:left 属性，将右侧 div 设置为 float right 属性

但我的右侧 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 的特定部分，其余部分将从左右 div 中屏蔽

4

4 回答 4

1

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

于 2012-07-11T15:57:30.763 回答
0

Position:Absolute 和 Float 相互覆盖。你不能两者兼得。Position: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>

这至少对我有用。

于 2012-07-11T10:45:04.973 回答
0

首先移除绝对定位并使用浮动技术，并将第二个 div 的宽度设置为 80% 而不是 100%，以便有一个空间供第一个和第三个 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>
于 2012-07-11T11:04:44.990 回答
0

这可以通过 CSS3 更简单地完成：

样式.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 {;
    }

索引.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

于 2015-07-22T08:26:38.320 回答