标签: css-float

我试图让两个div浮动到页面的两侧,文本在它们之间流动.第二个(左对齐)div的顶部应该与第一个(右对齐)div的底部平齐.下面的代码在FF,Chrome,Opera等方面运行良好,但它们在IE中无法正常清除.两个div都出现在文本的顶部.

如果我在文本中将左对齐div移动得足够低,它在IE中工作正常,但这不是一个可持续的解决方案.

我在IE CSS浮动错误上找到了多个页面,但我没有找到任何与此直接对话的内容.

CSS

div {
    width: 200px;
    margin-top: 10px;
    border-style: solid;
    border-width: 1px;
    position: relative;
}
.wrapper {
    width: 600px;
    border-color: #FF0000;
}
.right {
    float: right;
    border-color: #00FF00;
}
.left {
    float: left;
    clear: both;
    border-color: #0000FF;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="float.css" />
</head>
<body>
<div class="wrapper">
    <div class="right">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla pretium tempor leo. Vivamus mi risus, dapibus ac, 
        consectetur quis, …

我试图将文本浮动到表格中第一行的第3列中的图像上.这个单元格中有一个<img>(由psd切片处理),我想在其上放置文本.我尝试过float: left,position: absolute但似乎没有任何效果.

有任何想法吗？

我正在制作一个基本的评论系统.当评论很短时,这是完美的,但是当用户写了很多时,评论并不像它应该的那样花哨......我试图用高度填充空间:100%; 但它没有像我预期的那样工作.我希望作者信息填写评论的高度.

到目前为止我尝试过的:http://jsfiddle.net/anWVC/3/

HTML:

<div class='comment'>
    <div class="f-left">
        <small style="font-size: .8em;">23:44 - 10/12/2011</small>
        <img src='http://comenzarjuego.com/wp-content/uploads/2010/02/pikchu.jpg' width='96' alt='Avatar' />

        Pikachu_Monster<br/>
        ------------<br />
        Age: 19<br />
        Comments: 67<br/>
    </div>

    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat mattis nibh eget viverra. Vivamus dolor erat, eleifend mollis fringilla nec, sodales in sapien. Praesent sit amet adipiscing augue. Fusce fermentum luctus euismod. Fusce ac elit enim. Maecenas tempor volutpat tempus. Lorem ipsum dolor sit amet, …

我有一个图像,css"float"设置为"left",在"div"元素内.即使位置是相对的,图像也不会强制div的高度增加,因此图像突出于div的底部.我怎样才能解决这个问题？

我在两年前写过一个设计:目标是适应1024px的屏幕,但是有一些额外的图形内容,所以在大屏幕上看起来不会太小.结果是http://megaglest.org/,一个开源项目的网站.

这是HTML:我不想使用img标签,因为它可以让我在无法加载这些图像的响应式设计上工作:

<div id='all'>
    <div id="header">
        <div id="header_left"></div>
    </div>
</div>

这是相应的CSS:

#all {
    width: 1016px;
    margin: 0 auto;
}
#header {
    height: 313px;
    background-color: #4dd;
}

#header_left {
    float: left;
    width: 140px;
    margin-left: -140px;
    height: 379px;

    /* works fine */
    /* background: #dd4; */

    /* there's a one pixel offet */
    background:
       url("http://megaglest.org/uploads/megaglest2011/header/left.jpg")
       no-repeat; 
}

仅在Google Chrome上(Linux上为22.0.1229.94),并且仅在特定窗口大小时(当只有#header_left的一部分可见时),我在图像和蓝色标题之间得到一个偏移的像素.当"结果窗格"很宽时,可以看到使用这个jsFiddle:http://jsfiddle.net/hTbJA/

这是该问题的屏幕截图.有趣的是,谷歌Chrome开发人员工具在"指标"中说div是140px宽,但是当我使用"Elements"窗​​格并悬停#header_left时,它说141px!它可能是一个浏览器错误吗？

谢谢.

我读了一篇关于清除浮动如何清除没有结构标记的浮动的文章

然后我检查.clearfix引导程序:

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

我发现了一些差异,我有几个问题:

1. 为什么要clearfix分开几个部分？
2. 为什么display是table,不是block？
3. 为什么这种使用line-height不是height？

我试图使用CSS来把100% width div整个页面,然后根据该div2个div小号inline是50%每个每个10px padding上的所有div秒,然后在页面变小使两者50% div的变化对100%

这是我到目前为止:

<style type="text/css">
body,html {
    margin:0;
    padding:0;
}
.outer {
    width:100%;
}
.topblock {
    width:100%;
    padding:10px;
    border:1px solid black;
}
.block1 {
    width:48%;
    padding:1%;
    float:left;
    display:inline;
    border:1px solid black;
}
.block2 {
    width:48%;
    padding:1%;
    float:left;
    display:inline;
    border:1px solid black;
}
</style>

HTML:

<div class="outer">

<div class="topblock">
tickets
</div>

<div class="block1">
service orders
</div>

<div class="block2">
tickets 2
</div> …

我应该让3 div秒坐在一起.所以我做了一个div,我已经把三个divs,这个css样式:

div.holder div {
  float: left;
  width: 250px;
  background-color: yellow;   

  /*margin-right:auto;  /**These did not help**/
  margin-left:auto;  */
}

和html这样:

<div class="holder">
  <div></div>
  <div></div>
  <div></div>
</div>

它应该看起来像这样: 相反,它看起来像这样:

边框div应与灰线的末端对齐.

我想在线路断开时设置.container的内容.我不知道如何同时使用float:left和center.我认为这两种都是独特的.

div.container {
  border: solid 1px black;
  text-align: center;
}

div.floatfix:after {
  content: '';
  display: block;
  clear: both;
}

div.item {
  float: left;
  border: solid 1px red;
  padding: 5px;
}

<div class="container floatfix">
  <div class="item">First Item</div>
  <div class="item">Another Item</div>
  <div class="item">Just Another Item</div>
  <div class="item">Middle Item</div>
  <div class="item">Item</div>
  <div class="item">Last Item</div>
  <div class="item">Realy Last Item</div>
</div>

我希望得到如下效果

我正在尝试构建一个简单的页面，其中包含使用材料精简版设计的卡片，但是一个问题卡住了页面的整个布局。如何将MDL卡对准 屏幕的右侧？我已经尝试过float：right; 在css中，则卡仅在同一列中向右移动，而不在屏幕上移动。帮我转移

<div class="mdl-cell mdl-cell--6-col">
    <div class="demo-card-wide mdl-card mdl-shadow--2dp">
        <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">Welcome</h2>
        </div>
        <div class="mdl-card__supporting-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Mauris sagittis pellentesque lacus eleifend lacinia...
        </div>
        <div class="mdl-card__actions mdl-card--border">
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                Get Started
            </a>
        </div>
        <div class="mdl-card__menu">
            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                <i class="material-icons">share</i>
            </button>
        </div>
    </div>
</div>