浮动：右图突破div

Question

I'm sure this has been answered before but I'm having trouble finding a solution. 我敢肯定这已经得到回答，但是我在寻找解决方案时遇到了麻烦。 This is what I currently have as my html: 这是我目前拥有的html：

<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>

<style type="text/css"> 

</style>
</head>
<body>
    <div id="flip">
        <p>Click to slide the panel down or up</p>
        <img class="ux" src="/path" alt="complete" height="32" width="32" align="right" />
        <img class="ux" src="/path" alt="add" height="32" width="32" align="right" />
        <img class="ux" src="/path" alt="edit" height="32" width="32" align="right" />
        <img class="ux" src="/path" alt="remove" height="32" width="32" align="right" />
    </div>
    <div id="panel">Hello world!</div>

CSS: CSS：

body {
  width: 80%;
  margin: auto;
  margin-top: 30px;
}  

#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}

When I try to put these together, images appear on the bottom right side of the div border, and then alter further when the slideToggle() is invoked. 当我尝试将它们放在一起时，图像会显示在div边框的右下角，然后在调用slideToggle()时进一步更改。 My end goal is to have all 4 images inline with the paragraph tag. 我的最终目标是使所有4张图像都与段落标签内联。 Any and all help is greatly appreciated. 任何帮助都将不胜感激。

EDIT: Here's the jfiddle link: http://jsfiddle.net/4jNp8/ 编辑：这是jfiddle链接： http : //jsfiddle.net/4jNp8/

EDIT: Same JSFiddle, but with placeholders: http://jsfiddle.net/4jNp8/1/ 编辑：相同的JSFiddle，但带有占位符： http : //jsfiddle.net/4jNp8/1/

Answer 1

The simplest way is to add display:inline block to the p and img tags: 最简单的方法是将display:inline块添加到p和img标签：

#flip > * {
    display: inline-block;
}

p is a block level element, so unless you float it, inline-block it, or use some other positioning (such as display: table-cell) any content after it will not display inline with it. p是一个块级元素，因此除非您float ， inline-block它或使用其他定位方式（例如display：table-cell），否则任何内容将不会与其内联显示。

浮动：右图突破div

问题描述

1 个解决方案

解决方案1
3 已采纳 2014-03-20 02:25:59

浮动：右图突破div

问题描述

1 个解决方案

解决方案1 3 已采纳 2014-03-20 02:25:59

解决方案1
3 已采纳 2014-03-20 02:25:59