我想在图像旁边浮动一个段落,但不包装图像.像这样:
div.img {
float: left;
display: block;
margin: 15px 2% 0 2%;
width: 26%; /* I cannot use that */
}
div.info {
float: right;
display: block;
margin: 15px 2% 0 2%;
width: 66%; /* The width should be variable */
}
问题是,如果我将宽度设置为img和info,但是图像是可变宽度/高度,我可以这样做.它没有特定的宽度/高度.
在这种情况下我几乎迷失了.请向我推荐任何东西.我希望两个div彼此相邻而不包装..不指定盒子宽度.
任何解决方案......工作？
这是我很久以前学到的东西之一,从来没有想过我是否真正以正确的方式做到这一点.
假设我们有这样的结构:
<div id="wrapper">
<div id="sideBar"></div>
<div id="mainContent"></div>
</div>
我们也说它wrapper的宽度为600px.
我应该漂浮sideBar left,mainContent right还是应该漂浮它们left？
另外,如果我设置一个固定的宽度,sideBar我该如何mainContent填充剩余的空间,类似于表的工作方式？如果我设置mainContent为display:inline-block并向width:100%下移动到下一行:/
注意:在我的特定场景中,我不想使用表格.
考虑以下测试用例,其中浮动元素和内联元素放置在一个<fieldset>对比<div>:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.float {float:right; background-color:red; height:200px;}
</style>
</head>
<body>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<div>
<span>Inline!</span>
<div class="float">Float!</div>
</div>
<div>
<span>Inline!</span>
<div class="float">Float!</div>
</div>
</body>
</html>
渲染时,场集是200像素高(它们清除浮点数？),而div只有内联元素高.这种行为的原因是什么,是否有一种解决方法允许字段集的行为与div一样？
想知道是否有一种仅限css的方式来执行切换输入焦点上相应标签上的样式.到目前为止,我有:
$(document).on('focus active', 'input',function(){
$('label[for='+$(this).attr('id')+']').addClass('active');
});
$(document).on('blur', 'input',function(){
$('label[for='+$(this).attr('id')+']').removeClass('active');
});
HTML:
<div class="row">
<label for="contact_form_mail">Email</label>
<input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
</div>
和CSS:
.active{ color:red; }
编辑:我肯定知道孩子和兄弟选择器"解决方法",但重新排列干净的标记为纯粹的造型似乎不对,所以如果有另一种纯粹的CSS方式这个答案赢了!
我在chrome中遇到加载问题,只有在某些时候它一次加载它并且浮动在菜单中看起来很好,但有时它加载它比平常慢,它会导致浮动突破到一个新行.我注意到它通常只发生在硬刷新(F5)上,但有时候只是点击一下就会发生.
这在IE,Firefox或Safari中不是问题.任何人都有我的代码编辑来解决这个问题？
这是我的代码:
HTML:
$text .= '<div class="block-menu ">';
$text .= '<a class="block-menu-item logo gray" href="/"></a>';
$text .= '<a class="block-menu-item">Button 1</a>';
$text .= '<a class="block-menu-item">Button 2</a>';
$text .= '<a class="block-menu-item">Button 3</a>';
//Floats right
$text .= '<div id="block-menu-bar-button">';
$text .= '<a class="block-menu-item">Button 4</a>';
$text .= '<a class="block-menu-item">Button 5</a>';
$text .= '<div style="clear:both;"></div>';
$text .= '</div>';
$text .= '</div>';
CSS:
#block-menu-bar-button{
float:right;
display:inline-block;
overflow:hidden;
}
.block-menu{
position:relative;
width:70%;
text-align:left;
margin:auto;
padding:15px 0;
}
a.block-menu-item, div.block-menu-item{
display:inline-block;
margin:0 20px;
padding:2px 0;
border-bottom: 2px …我想创建一个带有标题栏的简单框,其中包含标题和一些工具按钮.我有以下标记:
<div style="float:left">
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: left; background-color:green;">title</div>
<div style="float: right; background-color:yellow;">toolbar</div>
</div>
<div style="clear: both; width: 200px; background-color: red;">content</div>
</div>
这在Firefox和Chrome中呈现得很好:
http://www.boplicity.nl/images/firefox.jpg
但是,IE7完全混乱并将右侧浮动元素放在页面右侧:
http://www.boplicity.nl/images/ie7.jpg
这可以修复吗？
如果有人能为css问题建议比stackoverflow更好的地方,请告诉我.
我有一个带背景和边框的外部div,然后我需要在彩色框内有两列.有些原因,当我将浮动div放在外部div中时,外部div不会增长.
这是我的HTML:
<div class="tip_box">
<h3>Send</h3>
<hr />
<form id="email_form">
<div class="three-columns">
<div class="contact_form_input">
<h6>Your Name</h6>
<input type="text" name="name_text_box" class="form_input" id="name_text_box" />
</div>
<div class="contact_form_input">
<h6>Your Email</h6>
<input type="text" name="email_text_box" class="form_input" id="email_text_box" />
</div>
</div>
<div class="three-columns">
<div class="contact_form_input">
<h6>Recipient Name</h6>
<input type="text" name="name_text_box" class="form_input" id="Text1" />
</div>
<div class="contact_form_input">
<h6>Recipient Email</h6>
<input type="text" name="email_text_box" class="form_input" id="Text2" />
</div>
</div>
</form>
</div>
<p>This is where your message will go. Anything you want, as long as you want. Make it personal; …对于一种缩略图水平滑动查看器
如何使水平滚动div内的div强制滚动div水平,而不是到达结尾并开始新的行？
我已经在使用float:left和display:inline-block但它们到达容器的末端并创建一个新行而不是强制容器水平扩展以适应它们因此强制需要水平滚动条
所以div框是强制执行此操作:
[ ][ ][ ][ ][ ][ ][ ][ ][ ][ ]
<---->scroll
代替:
[ ][ ][ ][ ]
[ ][ ][ ][ ]
码:
<div style="overflow-x: scroll; overflow-y:hidden; width:500px; height: 140px;">
<div style="width: auto;">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div>
</div>
.box{
width: 100px;
height: 100px;
border: solid 1px black;
float:left;
display: inline-block;
}
这是一个小提琴:http://jsfiddle.net/5s7vv/
我想要做的是有2个按钮向左浮动,2向右浮动,就像示例一样,但button_4应该是最右边的元素.但是,我只能通过一个简单的浮动权来实现.我应该在标记中更改它们的顺序,但这会破坏用户体验(按钮之间的标签顺序错误),这实际上导致了我的问题.
是否可以按正确的顺序向右浮动两个按钮并保持其标签索引,当然也没有额外的标记.(将它们包装在div中很容易,但我真的想避免这种情况).
我知道tabindex属性,但据我所知它没有得到很好的支持......
HTML代码:
CSS:
#container{
width: 200px;
}
#container a{
width: 20px;
height: 20px;
}
.button_1, .button_2{
float: left;
}
.button_3, .button_4{
float: right;
}
.button_1{background-color: blue;}
.button_2{background-color: red;}
.button_3{background-color: green;}
.button_4{background-color: yellow;}
当双击灰色标签中的文本(浮动:右)时,chrome(webkit)也会在行的开头选择文本(浮点数:左).有没有办法在不添加额外标记或更改标签源顺序的情况下解决这个问题？