标签: css-float

我有一个记录管理Web应用程序,它在一个屏幕上显示一个主记录,AJAXes动态构建编辑器到一个编辑器div,我用JQuery来制作可拖动的.这样可行.

即使div不是一个窗口,我认为让它更像一个窗口可能是一个好主意,所以我用"关闭"按钮进行编码.结构如下所示:

<div id="editor">
  <div id="draghandle" />
  <div id="closebutton" />
  <div id="editorbody" />
</div>

Editorbody是可变维度的,取决于人们想要进入的内容.

Draghandle的宽度设置为编辑器的100%.Closebutton在CSS中设置为float:right.

我的问题是,在IE6和IE7中,关闭按钮浮动得太远了.它总是在窗口的右边缘,无论我在哪里拖动编辑器div.在Firefox和Safari中,它看起来像我预期的那样 - 窗口和编辑器一样宽,而按钮位于右上角.

我并不特别喜欢浮动:对,只是想找到一种方法来设置CSS,它会在所有浏览器中给出相同的结果.有任何想法吗？

"屏幕截图"

这是我想在jsbin上做的一个模型(谢谢,redsquare)

示例代码

我正在使用法律敏感信息,因此我无法提供该应用的屏幕截图.但是,我拍摄了一些照片并屏蔽了文本和界面,只留下了窗口结构.

它在IE7中看起来如何

它在firefox 3中的外观如何

这是链接:http://www.iancreates.com/3dbikefit/

div .pod有以下CSS:

.pod {
background-color: rgba(255, 255, 255, 0.898438);
border-bottom-right-radius: 15px 15px;
border-top-left-radius: 15px 15px;
color: black;
float: left;
font-size: 12px;
padding: 15px;
width: 270px;
}

有任何想法吗？

我想实现这个目标:

我想显示盒子,一个主盒子,每个盒子下面有一个小盒子,如图所示.我用以下html结构定义它:

<div class='content'>
   <div class='box'>
       <a>test</a>
       <div class='money'><div id='maxnumber'>
           <h3 id='max'>max</h3><h3 id='digit'>0000</h3>
       </div></div>
       <div id='numbereuro'><h3 id='digit2'></h3>
           <h3 id='euro'></h3>
       </div>
   </div>           
   <div class='utility'>test</div>
</div>

这是一个工作示例,显示没有较小框的结果:http://jsfiddle.net/

.box将更大的盒子命名为.utility机器人包裹下方的小盒子.content.我使用以下css:http://jsfiddle.net/76fXa/

.content {
    margin: 5px;
    padding: 5px;
    font-size: 11px;
    float: left;
}

.utility{
    position:relative;
    height:50px; width:100px; background:red;
}

.box {
    margin: 5px;
    padding: 5px;
    background: #BBE3A8;
    font-size: 11px;
    float: left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.box {
    position: relative;
    padding: 5px;
    width: …

整个导航栏及其JavaScript设置可在此处找到

http://jsfiddle.net/DyJzg/3/

现在它停留在页面的顶部,但我很想知道即使向下滚动页面,它是否可以浮动在顶部.谢谢.

<div class="header">

<div class="contact half">
    <dl>
        <dt>Email</dt>
        <dd>z@srgbethet.com</dt>

        <dt>Phone</dt>
        <dd>+456 333 444</dd>

        <dt>Website</dt>
        <dd>kkkk.com</dd>
    </dl>
</div>

<div class="skills half">
    <ul>
        <li>Quantum Accelerators</li>
        <li>dfeerfbe</li>
        <li>Parachuting</li>
        <li>Photon Cannons</li>
    </ul>
</div> 
</div>

CSS代码:

.half {
 float: left;
 width: 50%;
 }

最终结果是接触div和技能div都很好地并排安装.为什么没有冲突,因为他们都跟随float:left财产？

能否详细说明我之间的区别

固定与流体与弹性布局对比响应布局

在本页底部,有两列.右侧列包含Twitter提要,左侧列显示YouTube视频和评论部分.列由以下HTML和CSS创建

.leftCol {
    margin-right: 365px;
}

.rightCol {
    float: right;
    margin-bottom: 10px;
    width: 355px;
}

<div class="rightCol">
<div>

<div class="leftCol">
<div>

但由于我不明白的原因,左栏不会向右滑动到右侧栏左侧的空白区域.

有时甚至最简单的事情看起来都是不可能的......如果你看到我不知道的话,看看这个.

>>链接

一个div(绿色),使用类分为L和R两侧.

出于某种原因,类"left-content,right-content"不希望留在"examples"div中.

#examples 
{
width:100%;
margin-bottom:45%;
padding-top:10%;
height:auto;
border-top: dashed #CCC 1px;
background-color:#0FC
}




.resize 
{
width:100%; 
height:auto; 
border: solid #CCC 1px;
}

.left-content
{
float:left;
width:60%;
}

.right-content
{
float:right;
width:30%;
padding-left:5%;
}

.title
{
margin-top:0px;
font-family: 'PT Sans Narrow', Arial, sans-serif; font-size: 1.00em; font-weight:300;     letter-spacing: 0.1em; color:#F63
}   

.content
{
font-family: 'PT Sans Narrow', Arial, sans-serif;font-size: 0.80em; font-weight:300; color:#444; text-justify:newspaper
}

.goto, .goto a, .goto a:hover, .goto a:visited
{
margin-top:-5px; font-family: 'PT Sans Narrow', Arial, sans-serif;font-size: …

<div class="view">
  <img src="http://media-cache-ec2.pinterest.com/550x/cf/4f/36/cf4f36b3f25df6f6af27ca54012dedf1.jpg">
  <div class="details">
    Lorem....</div>
</div>

html, body {
  height: 100%;
}
.view {
  width: 500px;
}
img, .details {
  width: 50%;
}
img {
  float: left;
}
.details {
  padding: 10px;
  box-sizing: border-box;  
  overflow: hidden;
  background: pink;
  height: 100%;
}

有没有办法.details调整高度img？现在height: 100%似乎没有做到这一点.

http://codepen.io/anon/pen/GbfJE

曾经有一段时间IE6缺乏对CSS功能的支持,例如"display:table-cell"和inline-block,导致"float"被劫持并用于布局 - 这是从未设计过的(或者特别擅长).

使用浮动似乎导致过于脆弱的布局难以维护,并且通常会随着动态内容的变化而完全破坏.

这是当时的一个必要的恶魔,但是现在对IE8之前的浏览器的支持不太重要了,理论上我们应该能够摆脱浮动并使用实际适用于布局的CSS部分 - 例如上述显示:table-cell和inline-block.

我目前正在考虑建议我的团队完全摆脱基于浮动的设计 - 我是否有把自己画到一个角落并遇到问题的风险,或者如果旧的浏览器支持对我们的项目不重要,这是一个更好的选择？