标签: css-float
CSS - 与浮动对齐
我仍然非常擅长CSS,拥有以下CSS/HTML:
<input type="reset" value="Clear" style="float: right;" />
<input type="submit" value="Send" style="float: right;" />
产生以下结果:
alt text http://i49.tinypic.com/10wtjdi.png
而不是所需的输出:
alt text http://i47.tinypic.com/acblzm.png
更改HTML元素的顺序似乎可以解决问题,但也是违反直觉的.
这类问题的一般解决方案是什么？
推荐指数
解决办法
查看次数
以另一个DIV为中心浮动DIV
我试图将div放在另一个div上,但在中心(宽度).
编辑:我希望容器div超过顶部div并居中.
目前的CSS:
body {
background-color: #FFF;
margin: auto;
}
#top {
background-color: #F2F2F2;
border-bottom: 1px solid #CCC;
height: 150px;
position: relative;
}
#container {
background-color: #FFF;
border: 1px solid #CCC;
width: 920px;
height:300px;
position: absolute;
top:0;
right:auto;
}
这就是我得到的:
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
firefox不尊重浮动方向的javascript变化
这个代码适用于所有主流浏览器,除了firefox,它说它已经完成了我的要求,但事实并非如此.这让我疯狂.这是完整的html,css和javascript:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<style type=text/css>
.CastPic
{
position : relative;
top : +0px;
width : 250px;
height : 250px;
padding-top : 25px;
padding-left : 25px;
padding-right : 25px;
padding-bottom : 25px;
background-image : url('Cast photos/Fiona Colquhoun.jpg');
background-color : ivory;
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
border-style : solid;
border-width : 12px;
border-color : green;
float : left;
}
</style>
<script language="JavaScript" type="text/JavaScript">
function toggle()
{
if (document.getElementById("CastPic").style.float =="right")
{ …推荐指数
解决办法
查看次数
绝对定位和左/右浮动
这显然是矛盾的.我需要的是让两个子元素位于父元素的左边缘和右边缘,同时垂直居中并覆盖所有其他兄弟元素.
推荐指数
解决办法
查看次数
如何使用css将空的浮动div拉伸到可用的全高度？
我有两个浮动的div彼此相邻,并希望左边的一个伸展到正确的大小.单独使用css是否可行？
<div class="page">
<div class="left-sidebar">
</div>
<div class="right-content">
</div>
</div>
.left-sidebar
{
background: url('ImageUrl') no-repeat right top #F8F1DB;
float: left;
width: 203px;
min-height: 500px;
height : auto;
}
.right-content
{
background: #F8F1DB;
margin-left: 203px;
min-height: 477px;
}
最终看起来像这样:
------------------- | | | | | | | | | | | | | | | -------------------
左侧边框框架有一个背景图像,应该伸展到内容框架的任何高度,但是我遇到了问题.
是否有一种跨浏览器的方式使左侧边栏div仅使用css拉伸与右内容框架相同的高度？
推荐指数
解决办法
查看次数
CSS获取浮动DIV以拉伸到窗口高度
多年来第一次使用CSS进行了涂鸦,我有一种讨厌的感觉,我已经支持自己进入一个角落.
我用这个创建了一个3列浮动布局:
* {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}
#wrapper {
width: 960px;
background: silver;
margin: 0 auto;
}
#column-left {
width: 240px;
float: left;
background: #f4d2d4;
padding-top: 36px;
}
#column-center {
margin-top: 41px;
margin-left: 34px;
margin-right: 34px;
width: 492px;
float: left;
background: white;
}
#column-right {
width: 160px;
float: left;
background: white;
margin-top: 49px;
}
如您所见,左侧列具有彩色背景.但它并没有延伸到页面的底部,只是为了覆盖内容.我需要它一直向下伸展.
切换到3列布局的绝对或固定螺钉位置.使用高度:100%必须一直回到身体,这完全混淆了一切.有没有一种简单的方法来解决这个问题？
推荐指数
解决办法
查看次数
css双色背景黑客
嗨朋友有没有可能得到像这样的双色背景100%的宽度和高度
这是示例图像:
示例图片http://www.mediaserveit.com/demo/vivek/resources/question.png
(样品)左手边的白色其余部分是其他颜色.
如果我用div的方法
.left{
float:left;
width:30%;
background-color:#fff;
}
.right{
float:right;
width:70%;
background-color:#B97A57;
}
这使得高度问题.增加取决于div的内容.如果我使用min-height意味着它也在不同的屏幕上更改.如果有任何黑客在html体内设置像这样的背景!因为我需要全屏
推荐指数
解决办法
查看次数
如何使动态数量的div平均占用容器中的所有空间？
我有一个容器,其中有一个动态数量的div.我希望所有的div都适合一行而不包装,以便每个div具有相同的宽度.div的数量和屏幕的大小都可以改变.我希望有一个css解决方案.
在这个小提琴中,灰色框应该填充三个大小相同的红色,绿色和蓝色矩形.
我试过这个无济于事.
#container {
width: 400px;
border: 2px solid #CCCCCC;
}
#container div {
width: auto;
display: inline-block;
height: 200px;
}
感谢您的任何帮助,您可以提供!
推荐指数
解决办法
查看次数
使用CSS将一个图像浮动到另一个图像上
我正在使用一些简单代码的bootstrap.在jumbotron div/container里面我有2张图片.一个左对齐.一个右对齐.如何在调整浏览器窗口大小时允许正确的图像漂浮在左侧上方/上方？快把我逼疯了.
<div class="jumbotron">
<div class="container">
<div class="left-image">
<img src="left-image.png">
</div>
<div class="right-image">
<img src="right-image.png">
</div>
</div>
</div>
我觉得像这样的简单css会这样做吗？
.left-image {
float: left;
}
.right-image {
float: right;
z-index: 999;
}
推荐指数
解决办法
查看次数