标签: css-float

我希望我的所有内容都能在图像中流动.要做到这一点,我只是做了

img#me {
    width: 300px;
    float: left;
    margin-right: 30px;
}

这适用于文本包装,但其他元素则支持它.例如

<style>
h2 {
   background: black;
   color: white;
}
</style>
<img id="me" src="http://paultarjan.com/paul.jpg" />
<h2>Things!</h2>

然后h2背景流过30px边缘.我应该怎么做呢？

我需要一些帮助,试图在IE中正确显示浮动.我试图将它[箭头]向右浮动后IE想要添加换行符...

我想它显示像Firefox(右),它们都适合一行,但我似乎无法弄清楚如何...

干杯.

background-image: url( '/img/arrow_down.gif' ); 
background-repeat: no-repeat;
height: 8px;
width: 15px;
display: inline;
float: right;

我有以下结构的ul

<div class="gal">
<ul>
        <li>
            <a rel="lightbox[imgs]" href="http://192.168.0.204/CAPW/uploads/materials_pics/5fdc91f1f2e9471ca375d346d3558757.jpg">
                <img width="100" height="100" class="imgclass" src="http://192.168.0.204/CAPW/uploads/materials_pics/5fdc91f1f2e9471ca375d346d3558757_thumb.jpg">
            </a>    
        </li>
        <li>
            <a rel="lightbox[imgs]" href="http://192.168.0.204/CAPW/uploads/materials_pics/d3a43711dee8a4331f14329d40ed6314.jpg">
                <img width="100" height="100" class="imgclass" src="http://192.168.0.204/CAPW/uploads/materials_pics/d3a43711dee8a4331f14329d40ed6314_thumb.jpg">
            </a>    
        </li>
        <li>
            <a rel="lightbox[imgs]" href="http://192.168.0.204/CAPW/uploads/materials_pics/836bdef9b8ec56c0a88386760efb1f90.png">
                <img width="100" height="100" class="imgclass" src="http://192.168.0.204/CAPW/uploads/materials_pics/836bdef9b8ec56c0a88386760efb1f90_thumb.png">
            </a>    
        </li>

        </ul>

因为我有不同的图像拇指尺寸我无法设置宽度和高度<li>.请参考屏幕截图.它没有正确对齐

使用的CSS

<style type="text/css">
    .gal ul li {
        padding: 5px;
        margin: 5px;
        position: relative; 
        float: left;
        list-style:none;
    }

    .imgclass {
        float: left;
        margin: 0 0 15px 0;
        padding: 2px;
        vertical-align:middle;
    }
    .gal {
        margin:0 auto;
        width: 850px;
        text-align:center;
    }

    </style> …

我正在寻找某种类型的css(也许是jquery)解决方案,其中div总是保持在屏幕的底部 - 就像这在facebook上进行 - >查看消息 - >个人消息对话."回复"框始终位于底部,当您滚动到顶部以查看先前的消息时,回复框也会向上移动.

谢谢

我有一个以div元素为中心的问题.我想要居中的div元素应用了以下样式:

width: 60%;
float:right;
margin-left: auto;
margin-right: auto;
min-width: 300px;

唯一的父标记是body标记,它应用了以下样式:

width:100%;
overflow-x:hidden;

元素不是居中,而是与右边对齐.我之前将元素设置为"float:left",并且我没有将它居中的问题,但是当我将其更改为"float:right"时,元素不再居中.

元素的宽度可变,所以我不知道.

是否可以将此元素置于其包装元素中？

包装纸的固定宽度为960px ......

如何水平对齐图像和文本而不移动图像下的其他文本

我喜欢这样做(示例XXXXX是一个大图像)

XXXXXXXX  This is a big image.
XXXXXXXX  all text should not goes 
XXXXXXXX  down the image
XXXXXXXX

但问题是我的文字落在了图像上

XXXXXXXX  This is a big image.
XXXXXXXX  
XXXXXXXX  
XXXXXXXX
all text should not goes down the image

请帮助我.

这是我的代码

<div id = 'wrap'> 
   <div class='image'>
     <img src="/test/1.jpg" />
     This is a big image  all text should not goes down the image
   </div>
   <div class='image'>
     <img src="/test/2.jpg" />
     This is a big image  all text should not goes down the image …

我正在尝试制作一个内置6个Div的包含DIV.最左边和右边是25%宽,100%高,中间4个都是25%宽50%高,并且相互叠加.像我的粗略绘图一样:

-------------------------------------------
|          | Div 2    | Div 3   |         |
|   DIV 1  |          |         |         |
|          | All 4 25%| width   |         |
|25% width |__________| ________|  Div 6  |
|          |          |         | same as |
|100%      |    50%   | Height  |         |
| height   |          |         | Div 1   |
|          | Div 4    | Div 5   |         |
-------------------------------------------

我一直在接近,但这让我很难过.谢谢!

我正在尝试水平对齐HTML定义列表,因此术语在左侧,定义在右侧.

术语和定义都可以很长,因此它们可以比可用宽度更宽并且将包裹.

使用我的CSS,我对包装的定义没有问题,因此高于相应的术语.但是在极少数情况下,当术语包装并且高于相应的定义时,我没有得到以下定义来正确清除.

您可以在我的jsFiddle中看到这一点,其中定义"555"未与术语"555"正确对齐.

http://jsfiddle.net/jmuheim/kjf8f/

任何有关如何解决这个问题的帮助真的很感激.要求:

• 我希望定义使用右侧的所有可用水平空间,因此我不想为<dd>标签使用固定宽度.
• 我不希望任何情况下的定义都位于相应的术语下.

我在相对位置有一个div,在里面我用其他div显示图像,问题是这个div里面的图像改变了他的大小我可以放在绝对位置的中心,但如果图像大小改变,最后改变他的位置

#image_container
{   
position:relative;
width:336px;
height:328px;
border:1px solid;
}


#image_load
{   
top:50px;
position:absolute;
width:auto;
height:auto;
left:50%;
margin-left:-50%;
} 

<div id="image_container">
    <div id="image_load">
        <img src="test.png">
    </div>
</div>

如果图像尺寸发生变化,我如何能够始终将位置固定在中心位置？