标签: css-float
非常基本的HTML格式
我把头发拉到这里.我只想要两个div并排包含内容,根据内容调整div和它们包含的div,所有内容都可见,没有滚动.
以下标记不是我的网站,但我写了它来展示我想要的东西:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style>
#outer{
width:400px;
}
#innerleft{
width:200px;
float:left;
}
#innerright{
width:200px;
color:#900;
float:left;
}
</style>
</head>
<body>
<div id="outer">
<div id="innerleft">
sdgfjfdbvkjfdbvkjfdbvkjdfbvkjdfbvkjdfbvkjdbvkjdfbvkjdfbvkjdfbvkjdfbvkjdfbjkfbvjkdfbdfkjdfbjkfdbkjdfjvfjkbfvbjkfvkjbvbfjdjdfdfbdfj
</div>
<div id="innerright">
dsufbjksvkudfsvkdfubvjkdfhbvkhdfbvksdbvkjsdbvkjdsbvkjsbdvkjbsdvkjbsdkjvbskjvbsdkjvbskdjbvksdbvksdjvbkjdsbvkjsbvkjsdbvkjdsbvkjdsksbdjv
</div>
</div>
</body>
</html>
我似乎已经尝试了一切!
推荐指数
解决办法
查看次数
为什么浮动导致顶部的利润增加？
简单的CSS问题,我一直想知道,我想知道它是如何工作的.
假设我有以下内容:
<div>
<p>some text</p>
<p style="float: left">some text</p>
</div>
如果我float: left从给定<p>元素中删除该元素,则该元素及其先前的兄弟元素会堆叠得更近.
为什么浮动元素会导致其顶部的利润增加？
推荐指数
解决办法
查看次数
CSS:使用Floating Divs垂直对齐Icon旁边的文本
我正在尝试对齐图标/图像旁边的文本,我希望文本或图像垂直对齐但是不应用vertical-align,它可能与浮动有关
这是一个图像解释我想做什么:
这是我到目前为止所拥有的:
---- HTML ---
<ul class="toolboxItems">
<li>
<div class="image">
<img src="someImage.png">
</div>
<div class="label">
<label>Lorem ipsum dolor sit amet....</label>
</div>
<li>
<li>
/* more of the same .... */
</li>
<ul>
---- CSS ----
ul.toolboxItems li {margin-bottom:10px;}
.image {float:left; width:30px;}
.label {float:left; width:150px; vertical-align:middle;}
我尝试使用display:table/table-cell但它没有用.
推荐指数
解决办法
查看次数
悬停的Div边界推动浮动的内容
我有4个float: left像这样的div容器......
我想在div悬停时显示边框.但是,当我将鼠标悬停在第一个或第二个div上时,它将底部div推向左侧......
我尝试在div中添加margin和padding,但似乎没有任何效果.
.div
{
width: 33%;
}
.div:hover
{
boder: solid 1px #EEE;
}
推荐指数
解决办法
查看次数
CSS:两个,divs并排
如何使绿色/黄色框显示在侧边栏旁边而不是下方？绿色/黄色部分应为100%宽度.
这是我的源代码: HTML
<div id="sidebar">
</div>
<div class="header">
</div>
CSS
#sidebar{
background-color: #404040;
height: 100%;
width: 50px;
}
.header{
margin-left: 50px;
width: 100%;
height: 200px;
background-color: #808000;
}
推荐指数
解决办法
查看次数
浮动元素会导致父对象崩溃。HTML / CSS
如果我有以下代码：
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
父级将折叠，并且看起来高度为0px。
因此，我猜这是一个已知问题，并且有可用的修复程序，但是我真的很想知道为什么它首先发生。
有人可以解释吗？
推荐指数
解决办法
查看次数
有没有办法让<tr>浮动一个响应表布局？
我很好奇是否有任何办法让细胞4漂浮在细胞3旁边？
我不想考虑非表格解决方案(请不要建议,因为我知道如何做到这一点).如果要求可以逐字完成,我只是好奇.
感谢任何可以提供任何输入的HTML/CSS大师.
table{
width:100%;
table-layout:fixed;
max-width:500px;
}
td{
width:50%;
display:inline-block;
margin:0;
padding:0;
}<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>期望的布局:
推荐指数
解决办法
查看次数
CSS clear float with:元素不工作后
我似乎无法做到这一点.它非常简单,清除h4元素(widget-title)之后的float,以便文本框在新行上左对齐.
HTML无法更改.
这是小提琴:http://jsfiddle.net/j29ubvjw/
.widget-wrap {
padding:15px;
background-color: #EEE;
}
.widget-title {
font-size: 18px;
margin:-15px 0 15px -15px;
background-color: #CCC;
padding: 15px;
float:left;
}
.widget-title:after {
content: "";
display: block;
clear: both;
}
<div class="widget-wrap">
<h4 class="widget-title">My Title</h4>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper</p>
</div>
</div>
我究竟做错了什么？
推荐指数
解决办法
查看次数
CSS Float Logic
我创建了25盒随机宽度和高度,其中width == height(如图所示)
$(document).ready(function(e) {
for (var count = 0; count < 5; count++) {
for (var iter = 0; iter < 5; iter++) {
$(".content").append("<div id='" + count + "_" + iter + "' class='box'><p>" + count + "_" + iter + "</p></div>");
$(".content div:last").width(Math.round((Math.random() * 100) + 50));
$(".content div:last").height($(".content div:last").width());
}
}
});.box {
background: #FF0004;
margin: 10px;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="content">
</div>
</body>我试图更好地理解浮动属性逻辑和浮动元素彼此"堆叠"时定位的原因.例如(从小提琴截取的截图):
是什么让3_3重新定位到如下所示的位置,当屏幕变大？
据W3Schools说:
如果你将几个浮动元素放在一起,如果有空间,它们会相互浮动. …
推荐指数
解决办法
查看次数
CSS float：对; 不工作
<div id="left-aligh">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Registered With</a></li>
<li><a href="#">Social</a></li>
<li style="float: right;"><a class="active" href="#">Regsiter</a></li>
</ul>
</div>
使用以下代码将所有菜单项都向左推
#left-aligh {
float: left;
position: relative;
bottom: 300px;
}
但我想单独将寄存器向右推，因为float选项不起作用。我试图在内部声明，<li>但是没有用，请帮忙。
推荐指数
解决办法
查看次数