标签: css-float

使用 CSS 清除固定和展开边距而不产生副作用（也没有额外的 HTML 元素）的一般好方法是什么？

以下因素会导致副作用（并且希望避免它们）：

• 设置overflow: hidden或overflow: auto：剪辑box-shadow、CSS 转换以及人们可能希望在框外显示的其他内容。因此它不能在多种情况下使用（但在其他方面效果很好）。
• 设置border或padding：明显的定位/尺寸效果。

我无法将两个输入框对齐在同一行上。每当我向右浮动一个时，它会立即将其推到下一行。

如何在同一行有两个输入框，一个在左边，一个在右边对齐，而不被推到下一行？

JS 小提琴在这里

.inline {
  display: inline;
}

input {
  width: 15%;
  font-weight: bold;
  background-color: transparent;
  border: 1px solid;
  font-size: 13px;
  font-family: Arial;
}

html {
  height: 100%;
  margin-bottom: 0px;
}

* {
  margin: 0;
}

.body {
  font-family: Arial;
  font-size: 13px;
  background-color: #ffffff;
  margin-top: 0px;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 0px;
  padding: 0 height: 100%;
  line-height: 200%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto;
  /* the bottom margin is the negative value …

我想#first左对齐#container和#second右对齐。
为此，我正在使用float: left;on#first和float: right;on #second。
然而，这会导致#first的左侧#container和#second旁边对齐。为什么会这样，我怎样才能达到我的愿望？

这就是我要的：

这就是我得到的：

这是我的代码：

<head>
    <style>
        #container {
            width: 500px;
            margin: 0 auto;
            border: 1px solid #000;
        }

        #first {
            float: left;
        }

        #second {
            float: right:
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="first">
            <p>first</p>
        </div>
        <div id="second">
            <p>second</p>
        </div>
    </div>
</body>

我试图像 bootstrap 一样创建 CSS 网格col。我想从左侧和右侧添加 15px 的填充。但是当我添加属性时，它会打破浮动（使其不能并排站立）。

这是示例：https : //jsfiddle.net/t29q1gcL/

为什么不起作用？

.grid-4{
  float: left;
  width: 40%;
  background: red;
  padding: 0 15px;
}

.grid-6{
  float: left;
  width: 60%;
  background: blue;
  padding: 0 15px;
}

基本上，我无法弄清楚如何使用引导程序将图像移动到卡片的右侧，类似于card-img-top或bottom的功能。

使用Bootstrap Documentation，这就是我所做的。

 <div class="row">
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">...</h5>
                            <p class="card-text">....</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                            <img class="float-right" src="Images/template.png" alt="sans" width=200px/>
                        </div>
                    </div>
                </div>

向右浮动没有帮助，因为我们希望图像完全位于卡片的右侧。

这就是它的样子：在此处输入图像描述

这就是它应该的样子在此处输入图像描述

我希望有一个有序列表,左侧有文本,而li右侧有每个li的图像.所以我将图像浮动到右边,它将图像正确地放在右边,文本放在左边,但是在IE和FF中图像的像素太低了14个像素.Chrome做得对.在我看来,这是IE和FF将浮动放在每个LI的外部或下方而不是它应该在的内部(如Chrome).如果我为IE和FF调整位置-14px(向上),它可以正常工作,但Chrome会搞砸.14px是每个LI的高度,这就是为什么这个技巧有效.

除非绝对需要,否则我不想要单个浏览器黑客攻击(即,为IE/FF执行-14px偏移并告诉Chrome忽略它).

#top25list{
       width:185px;
       cursor:n-resize;
       list-style:
       decimal inside;
       padding:0;
       margin:0
}
#top25list li{
       margin:0;
       padding:0 3px;
       background-color:#FFF;
       border-top:1px solid #990100;
       border-bottom:1px solid #990100
}
#top25list img{
       border:none;
       height:13px;
       width:13px;
       float:right
}
#top25list li:hover{
       background-color:#990100;
       color:#FFF
}

李的没什么特别的:

<li id=##>Name <a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a></li>

看到第一个LI没有FF/IE的图像,因为它在下面(它看起来像#2),而#25图像不在列表的底部.

我希望所有3看起来像Chrome.有一些JavaScript生成OL/LI,它只class=removeTeam适用于jQuery操作.这个列表在jQuery可排序的内部,我确实用jQuery(.disableSelection();)禁用了列表选择.我不认为这与jQuery或JavaScript有任何关系,只是简单的CSS.

如何将float两个DIVs并排,因为一个的宽度在像素中定义,另一个应该填充父级中的可用宽度DIV？关键是第二个内容DIV可能是空白的; 因此,我不能把它的宽度留空.

.div1 {
float:left;
display:block;
width:200px
}

.div2 {
float:left;
display:block;
width: [... 100% - 200px ...]
} 

我有一个容器div,里面有一个页脚div.首先,我的页脚在屏幕上,我不想使用"绝对"规则来定位它.如何将页脚放在页面底部？

CSS代码:

#container{
margin:auto;
width:85%;
height:auto;
}
#header {
background-image: url('http://static.manpoints.uk.to/images/header.png');
background-repeat: repeat-x;
background-color: #dd4814;
height: 140px;
}
#footer{
background-image: url('http://static.manpoints.uk.to/images/gradient-grey.png');
background-repeat: repeat-x;
background-color: #F0F0F0;
padding: 15px;
margin-top: 30px;
height: 90px;
width: 100%;
position: relative;
} 
#content {
margin: 10px;
width: 75%;
height: 100%;
float: left;
}

HTML代码:

<div id="container">
<div id="header">
<div id="logo"><span>Earn Man Points<br>Earn Respect</span></div>
</div>
<div id="menubar" align="center">
<ul id="menu">
<li><?php menuIndex(); ?></li>
<li><?php menuUser(); ?></li>
<li><a href="/leaderboard/" title="View the ManPoints Leaderboard">Leaderboard</a><li>
<li><a href="/upload.php" title="Upload content to …

遇到CSS下推问题,一直在寻找修复,但无法找出究竟是什么问题.所有图标都以阶梯式布局显示.需要你的帮助来解决这个问题.

HTML

<div style="/*float: left; width:153.6px;" */ class="footerStyles">
  <h4 style=" margin: 0; font-size: 100%;">CONNECT</h4>
  <a href="#" class="email connectWith"></a>
  <br/>
  <a href="#" class="twitter connectWith"></a>
  <br/>
  <a href="#" class="facebook connectWith"></a>
  <br/>
  <a href="#" class="googleplus connectWith"></a>
  <div class="clear"></div>
</div>

CSS

.connectWith{
    /*background-position: left center; 
    background-repeat: no-repeat; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    padding-left: 40px;*/ 
    margin-right: 0;
    padding: 0;
    float: left;
}
/* email    ---------- */
.email{
    width: 50px;
    height: 50px;
    text-decoration: none;
    display: block;
    text-indent: -9999px;
    background-image: url("http://www.browsealoud.com/images/browsealoud/plus/uk/firefox.jpg");
    background-position: 0 0;
}
.email:hover{
    background-position: 0 …

我正试图让4个盒子相互浮动.出于某种奇怪的原因,它们只是不起作用,也没有任何造型工作.

http://jsfiddle.net/u99A6/

这是我的HTML:

<section>
    <article>
        <div class="1-4-container">
            <p><strong>Lorem ipsum</strong></p>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="1-4-container">
            <p><strong>Lorem ipsum</strong></p>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="1-4-container">
            <p><strong>Lorem ipsum</strong></p>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="1-4-container">
            <p><strong>Lorem ipsum</strong></p>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
    </article>
</section>

这是我的CSS:

section {
    width: 100%;
}
section article {
    width: 1000px;
    padding: 20px;
    margin: auto;
}

.1-4-container,
.2-4-container,
.3-4-container,
.4-4-container {
    float: left;
}
.1-4-container {
    width: 25%;
}
.2-4-container {
    width: 50%; …