html css float:right with img 不能正常工作答案

【问题标题】：html css float:right with img is not working finehtml css float:right with img 不能正常工作
【发布时间】：2013-05-22 02:51:51
【问题描述】：

HTML

<table class='titleStatus' id='title'>
        <tr>
            <td class='lefttop'></td>
            <td class='bar'>Punch Data
                <img class='minMaxClose' src='images/close.png'>
                <img class='minMaxClose' src='images/max.png'>
                <img class='minMaxClose' src='images/minimize.png'>
                <img class='minMaxClose' src='images/setting.png'></td>
            <td class='righttop'></td>
        </tr>
    </table>

CSS

.minMaxClose{float: right;}

在 IE 上输出

而我需要像 Firefox 这样的输出

【问题讨论】：

你能把剩下的 CSS/上传到 Jsfiddle 吗？
结合 PHP 太复杂了，所以我只是简化我的问题 :)
只是猜测，未经测试：将“打孔数据”包装在一个跨度中并给它一个定义的宽度，例如100px（或任何适合您的需要）
也许这有帮助：stackoverflow.com/questions/6439577/…

标签： html css image css-float rights

【解决方案1】：

首先将 float:left 应用于所有图像，然后将 float:right 应用于包含图像的容器

.bar img{
float:left;//for shifting alongside
}


.bar{
float:right;//for shifting entire division to right side
}

【讨论】：

【解决方案2】：

http://jsfiddle.net/Am34U/3/ 给 bar 一个 800px 的宽度或其他东西，然后说你把打孔放在一个跨度内，给它一个 300px 的跨度并向左浮动，并给包含图像的跨度一个 500px 的跨度和向左浮动.

HTML

<table class='titleStatus' id='title'>
        <tr>
            <td class='lefttop'></td>
            <td class='bar'>
                <span id="punch">Punch Data</span>
                <span id="close">

                    <img class='minMaxClose' src='images/close.png'>
                    <img class='minMaxClose' src='images/max.png'>
                    <img class='minMaxClose' src='images/minimize.png'>
                    <img class='minMaxClose' src='images/setting.png'>
                </span>
            </td>
            <td class='righttop'></td>
        </tr>
</table>

CSS

.minMaxClose{
    float: right;
}
#close{
    background: purple;
    width: 400px;
    float: left;
}
#punch{
    background: orange;
    width: 300px;
    float: left;
}
.bar{
    width: 700px;
    background: blue;
}

【讨论】：

我的情况很复杂，我无法固定宽度。我自己发现解决方案。请检查我的anwser

【解决方案3】：

HTML

<table class='titleStatus' id='title'>
        <tr>
            <td class='lefttop'></td>
            <td class='bar'>Punch Data
                        <!--[if IE]>
                             <div class='ico-wrapIE'>
                        <![endif]-->
                        <!--[if !IE]>
                             <div class='ico-wrap'>
                        <![endif]-->
                <img class='minMaxClose' src='images/setting.png'>
                <img class='minMaxClose' src='images/minimize.png'>
                <img class='minMaxClose' src='images/max.png'>
                <img class='minMaxClose' src='images/close.png'>
            </div>
            </td>
            <td class='righttop'></td>
        </tr>
    </table>

CSS

.ico-wrap{float:right;}
.ico-wrapIE {
  position: absolute;
  right: 2px;
  top: 2px;
}

【讨论】：