浮動：右圖突破div

Question

我敢肯定這已經得到回答，但是我在尋找解決方案時遇到了麻煩。 這是我目前擁有的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：

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;
}

當我嘗試將它們放在一起時，圖像會顯示在div邊框的右下角，然后在調用slideToggle()時進一步更改。 我的最終目標是使所有4張圖像都與段落標簽內聯。 任何幫助都將不勝感激。

編輯：這是jfiddle鏈接： http : //jsfiddle.net/4jNp8/

編輯：相同的JSFiddle，但帶有占位符： http : //jsfiddle.net/4jNp8/1/

Answer 1

最簡單的方法是將display:inline塊添加到p和img標簽：

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

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