标签: css-float
浮动权和绝对位置不能一起工作
我希望div总是位于其父div的右侧,所以我使用float:right.有用.
但我也希望它在插入时不影响其他内容,所以我使用position:absolute.
现在float:right不起作用,我的div总是在其父div的左边.我该怎么把它移到右边？
推荐指数
解决办法
查看次数
使用display的优点:inline-block vs float:在CSS中保留
通常情况下,当我们想要DIVs连续使用多个时float: left,我现在会发现它的诀窍display:inline-block
示例链接在这里.在我看来,这display:inline-block是一个更好align DIVs的连续方式,但有任何缺点吗？为什么这种方法不那么流行float呢？
推荐指数
解决办法
查看次数
如何让div在高处漂浮,同时漂浮在里面
当它漂浮在里面时,我如何让div增加它的高度？我知道为宽度定义一个值并设置溢出到隐藏的工作.问题是我需要一个溢出可见的div.有任何想法吗？
推荐指数
解决办法
查看次数
CSS容器div没有得到高度
我希望我的容器div能够达到孩子身高的最大高度.不知道孩子div的身高.我正在试用JSFiddle.容器div是红色的.没有出现.为什么？
推荐指数
解决办法
查看次数
将DIV堆叠在一起？
是否可以堆叠多个DIV,如:
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
那么所有那些内部DIV都有相同的X和Y位置？默认情况下,它们都低于彼此,将Y位置增加上一个前一个DIV的高度.
我有一种浮动或显示或其他技巧可以咬人的感觉？
编辑:父DIV具有位置相对,因此,使用绝对位置似乎不起作用.
推荐指数
解决办法
查看次数
如何制作没有内容的DIV有宽度？
我正在尝试为DIV添加宽度,但我似乎遇到了问题,因为它没有内容.这是我到目前为止的CSS和HTML,但它不起作用:
CSS
body{
margin:0 auto;
width:1000px
}
ul{
width:800px;
}
ul li{
clear:both;
}
.test1{
width:200px;
float:left;
}
HTML
<body>
<div id="test">
<ul>
<li>
<div class="test1">width1</div>
<div class="test1">width2</div>
<div class="test1">width3</div>
</li>
<li>
<div class="test1"></div>
<div class="test1">width2</div>
<div class="test1">width3</div>
</li>
<li>
<div class="test1"></div>
<div class="test1">width2</div>
<div class="test1">width3</div>
</li>
</ul>
</div>
推荐指数
解决办法
查看次数
使外部div自动与其浮动内容的高度相同
我想要外面的div,它是黑色的包裹它div漂浮在其中.我不想在id中使用style='height: 200px,因为我希望它自动成为其内容的高度(例如,浮动s).divouterdivdiv
<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div style='width=300px;border: red 1px dashed;float: right;'>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
怎么做到这一点？
推荐指数
解决办法
查看次数
我怎么能停下来漂浮？
我有以下代码:
<div style="float: left; width: 100%;">
<label style="float: left;">ABC</label>
<input style="float: left; font-size: 0.5em;" type="button" onclick="addTiny(0,'Question_Text'); return false;" value="▼" title="Editor" />
<input style="float: left; font-size: 0.5em;" type="button" onclick="remTiny(0,'Question_Text'); return false;" value="▲" title="Hide" />
<div class="adm">
<textarea rows="2;" style="width: 100%" class="text-box multi-line mceEditor">
abc
</textarea>
</div>
</div>
我的问题是带有类adm的div浮动到左侧,因此与标签和两个输入按钮位于同一行.有没有办法让这种转变远离浮动？
推荐指数
解决办法
查看次数
让孩子在溢出之外可见:隐藏的父母
在CSS中,overflow:hidden在父容器上设置,以允许它随浮动子项的高度扩展.
但与margin: auto... 结合使用时还有另一个有趣的功能
如果PREVIOUS兄弟是一个浮动元素,它实际上会与它并列.也就是说,如果兄弟姐妹float:left那么容器float:none overflow:hidden会出现在兄弟姐妹的右边,没有换行 - 就好像它正在漂浮在正常流程中一样.如果之前的兄弟姐妹是float:right容器将出现在兄弟姐妹的左边.调整此容器的大小将准确显示它位于浮动元素之间的中心.如果你有两个以前的兄弟姐妹,一个说float:left对方float:right,容器将出现在中心插图中的两项.
所以这就是问题 ......
如何在不屏蔽孩子的情况下保持这种类型的布局？
谷歌搜索遍布网络给了我如何clear:both和扩展容器的方法...但我找不到任何替代解决方案来维持左/右前一个孩子居中.如果您制作容器,overflow:visible则容器突然忽略浮动元素的布局流程,并且在浮动元素的顶部显示为分层.
所以问题:
我必须有容器overflow:hidden来保存布局......
我该怎样才能让孩子们不被蒙面？我需要让孩子相对于容器外的父母绝对定位.
要么
我如何overflow:visible才能绝对将一个孩子相对于容器外的父母定位... YET保留兄弟浮动状布局流？
推荐指数
解决办法
查看次数
可变高度的CSS浮动分区
我有无限数量的100px宽度的div,可以放入250px宽度的父级.无论高度如何,我都需要将div显示在行中,如图所示.我已经尝试过解决这个问题,但div高度似乎搞砸了.
我非常感谢你的帮助.谢谢 :)
<style>
#holder{
width:250px;
border:1px dotted blue;
display:inline-block;
}
.box{
width:100px;
height:150px;
background-color:#CCC;
float:left;
text-align:center;
font-size:45px;
display:inline-block;
}
.one{
background-color:#0F0;
height:200px;
}
.two{
background-color:#0FF;
}
.three{
background-color:#00F;
}
.four{
background-color:#FF0;
}
</style>
<div id="holder">
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
<div class="box four">4</div>
</div>
这是jsfiddle
这是我用javascript https://jsfiddle.net/8o0nwft9/所做和所取得的成就
推荐指数
解决办法
查看次数