标签: css-float
输入文本自动宽度填充100%,其他元素浮动
我有一个搜索框的以下布局:
<div id="emulating_variable_width">
<form id="srxForm" method="post">
<div id="qsrxSearchbar">
<div id="scope"> Person Name </div>
<input type="text" id="theq" title="Search">
<button id="btnSearch" type="button">Search</button>
</div>
</form>
</div>?
(为了显示目的,它非常简化)
- "范围"中的标题是一个长度可变的文本
我想要的是让输入文本元素填充所有可用空间(即黄色空间),同时保持搜索按钮在右侧.
哪个是完成IE7 +,FF,Safari等解决方案的最简单方法？
谢谢!
推荐指数
解决办法
查看次数
文本环绕浮动div但边框和<hr /> s不包含
我有一个div,float: right它在父div中.p同一个父div中也有元素,文本float: right正确地包围div.但是,如果我将p元素设置为具有边框,或者执行a <hr />,则边框不会停止文本停止的位置,而是延伸到float: rightdiv 后面.
这是一个美丽的mspaint描述的情况:
请注意,黑色水平线的绿色部分位于浮动div的后面.
我如何获得边界或<hr />其他任何东西只能与文本一样宽,而不是在div后面？
推荐指数
解决办法
查看次数
css - 在带有display的元素上添加垂直空间:inline-block
我有一系列具有css属性显示的缩略图容器元素:inline-block但是当它们彼此相邻排列时,第二个元素在顶部比第一个元素有更多空间(参见附图).知道为什么会这样吗？有没有更好的方法将这些元素排列在一起？我知道漂浮他们可以解决这个问题,但看起来浮动并不是解决这个问题的最好方法.
这是我的代码:
HTML:
<article class="thumb_container">
<div class="thumb_content">
<img src="images/perlin.jpg" alt="Perlin Lines" class="thumb_img"/>
<header class="thumb_header">Perlin Lines</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lectus ac libero iaculis interdum nec id tortor. quis, ullamcorper id nisi. Etiam ut.
<a href="#">More...</a>
</p>
</div>
</article>
<article class="thumb_container">
<div class="thumb_content">
<img src="images/branching.gif" alt="Branching" class="thumb_img"/>
<header class="thumb_header">Branching</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lectus ac libero iaculis interdum nec id tortor. quis, ullamcorper id nisi.
<a href="#">More...</a>
</p>
</div> …推荐指数
解决办法
查看次数
在html2pdf中使用css浮点数
我正在使用花车将2个div放在彼此旁边.
<a href="printbox.php">print</a>
<?php ob_start(); ?>
<style>
#sidedish{
float: left;
border: 1px solid black;
width: 100px;
height: 100px;
}
#maindish{
float: right;
width: 200px;
border: 1px solid black;
height: 100px;
text-align: center;
}
#container{
width: 304px;
height: 100px;
border: 1px solid black;
}
</style>
<div id="container">
<div id="sidedish"></div>
<div id="maindish"><div id="box">name</div></div>
</div>
<?php $_SESSION['boxes'] = ob_get_contents(); ?>
这是printbox的作用,它只是将缓冲的数据渲染成pdf,但不知何故,设置的浮点数在此过程中丢失了.
<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('P', 'A4', 'en', true, 'UTF-8', array(0, 0, 0, 0));
$html2pdf->writeHTML($_SESSION['boxes']);
$html2pdf->Output('random.pdf');
?>
它在html上工作正常:
但当我点击打印时,它转向:
知道问题是什么吗？
推荐指数
解决办法
查看次数
"更好"漂浮在CSS中
我正在试验CSS和float属性.我有这个"网站",有很多div与80px网格对齐,并且float: left:
CSS中是否有一种方法使它看起来像这样 - 所以元素可以使用它们上方的空白区域？
没有JavaScript,如果可能的话.
谢谢,马丁.
推荐指数
解决办法
查看次数
CSS:nth-of-type()和:not()选择器？
我并排放置了25%宽的物品.我clear:both在每四个元素之后添加一个.但是我需要在元素之间插入一个图形分节符.它必须在里面<ul>.为了有效,我将"section-break"(下面样本中的第一个li项)包装成一个<li>.
<ul>
<li class="year"><h1>THIS IS A SECTION Break and 100% wide</h1></li>
<li>This is a article and only 25% wide</li>
<li>This is a article and only 25% wide</li>
<li>This is a article and only 25% wide</li>
<li>This is a article and only 25% wide</li>
</ul>
我希望每个第四个元素都是换行符,所以我用...
ul li:nth-of-type(4n+1) { clear: both; }
但是我希望li.year不受这种行为的影响,所以我尝试了这个
ul li:not(.year):nth-of-type(4n+1) { clear: both; }
现在<li>我上面的示例代码中的最后一个浮动到下一行但是不应该发生,因为第一行<li>不是浮动文章之一但包含标题.
是否可以堆叠:not和nth-of-type()选择到对方？
推荐指数
解决办法
查看次数
CSS相对+右(或底部)几乎从不工作
我已经写了很长一段时间了.
我注意到了
<div style="position: relative; right: 20%; bottom: 20%;">some text</div>
永远不会有效
相对定位适用于指定的左侧和顶部,但不适用于右侧/底部.为什么？
快速解决这个问题是使用"绝对"而是以像素为单位指定右/底,但我需要一个理由.
如果我错了,请纠正我.无论外部容器是绝对放置还是相对放置,将容器的"相对"定位到容器的边界或者容器内的元件是否总是"绝对"定位没有多大意义？
谢谢.
推荐指数
解决办法
查看次数
HTML布局:将侧栏列添加到现有站点
我有一个看起来像这样的身体的网站:
<body>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
在这些divs中没有使用绝对/相对定位技巧,但是这些s及其内部元素的样式中有很多floats,clears,margins和paddings div.所有这些都会产生一个看起来像这样的网站:
?????????????????
? header ?
?????????????????
?????????????????
? content ?
?????????????????
?????????????????
? footer ?
?????????????????
我的问题是:如何添加一个独立的固定宽度左栏(侧栏),其中包含额外的内容,这些内容将收缩整个站点(页眉内容页脚)并将它们移到右侧.
?????????????????
?side?? header ?
?bar ????????????
? ????????????
? ?? content ?
? ????????????
? ????????????
? ?? footer ?
?????????????????
我知道一个几乎理想的解决方案,但它很丑陋,需要重新嵌套现有的div:
<body>
<table>
<tr>
<td id="sidebar">...</td>
<td>
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</td>
</tr>
</table>
</body>
是否可以优雅地做到这一点,只需在身体的某处添加一个外部侧边栏元素,即,像那样？
<body>
<div id="sidebar">...</div> …推荐指数
解决办法
查看次数
什么是 CSS 中的 CLEARANCE
因此，我开始阅读 CSS 规范以更好地了解如何在我的代码中使用样式属性和属性。目前在 Box 模型 - 折叠边距，http://www.w3.org/TR/CSS2/box.html#collapsing-margin，我在规范中遇到了这一行。
如果具有间隙的元素的顶部和底部边距相邻，则其边距与后续兄弟元素的相邻边距折叠，但产生的边距不会与父块的底部边距折叠
有人愿意解释一下上面的真正含义吗？请在上面使用的间隙上也照亮更多的光。绝对会感谢您的意见。
推荐指数
解决办法
查看次数
'display:block;之间的区别 float:left'const'display:inline-block; 向左飘浮'？
左浮动元素(例如和图像)是否显示之间是否存在实际差异:内联块; 适用于它,而不是保留默认显示:block; 适用规则？
换句话说,有什么区别:
<div style="float: left; display: inline-block;">text</div>
和
<div style="float: left; display: block;">text</div>
？
推荐指数
解决办法
查看次数