Question

我可以在style属性中使用display: inline-block;将两个div彼此相邻，但是右侧的div在底部而不是顶部对齐。所以我试着浮动div，我又得到另一个问题......

如果我像这样使用花车：

<div style="width:100%">
                        <div style="width:25%; float:left;">
                            <asp:HyperLink ID="hlPic" runat="server" Target="_blank" ToolTip="Click to open this picture.">
                                <asp:Image ID="imgPic" Width="256px" Height="256px" runat="server" ToolTip="Picture" /> 
                            </asp:HyperLink>
                        </div>
                        <div style="width:75%; float:right;">
                            <table style="width:100%">
                                <tr>
                                    <td>
                                        <h2 style="display:inline;"><asp:HyperLink ID="hlCGValue" runat="server" ToolTip="Go to this corporate group.">[hlCGValue]</asp:HyperLink></h2>
                                    </td>
                                </tr>
                                 <tr>
                                     <td>
                                         <h3 style="display: inline;">
                                             <asp:Label ID="lblCompanyNameValue" runat="server"></asp:Label></h3>
                                         <asp:Label ID="lblCompanyID" runat="server" Visible="False"></asp:Label>
                                     </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:HyperLink ID="hlWebsiteValue" runat="server" Target="_blank">[hlWebsiteValue]</asp:HyperLink>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label ID="lblAssignedToValue" runat="server"></asp:Label>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>

我得到以下布局：

enter image description here

请注意，带有文字的表离图片太远......我想把它移到图片旁边。我尝试使用display：inline-block，然后数据表将在图片的旁边，但是它将位于div的底部而不是顶部（可能是由于pic的大小）。如果它有助于图片的最大尺寸应该只有256px x 256px。

任何人都可以帮助我使用我的CSS / HTML来使这看起来正确......

呈现html

<div style="width:100%">
                        <div style="width:25%; float:left;">
                            <a id="MainContent_hlPic" title="Click to open this picture." href="/Attachments/Pictures/56_27_11_2013_23_26_11_2013_Penguins.jpg" target="_blank"><img id="MainContent_imgPic" title="Picture" src="/Attachments/Pictures/56_27_11_2013_23_26_11_2013_Penguins.jpg" style="height:256px;width:256px;" /></a>
                        </div>
                        <div style="width:75%; float:right;">
                            <table style="width:100%">
                                <tr>
                                    <td>
                                        <h2 style="display:inline;"><a id="MainContent_hlCGValue" title="Go to this corporate group." href="../Corporate/Details.aspx?CorporateGroupID=39">Ford</a></h2>
                                    </td>
                                </tr>
                                 <tr>
                                     <td>
                                         <h3 style="display: inline;">
                                             <span id="MainContent_lblCompanyNameValue">Ford Global Test Co.</span></h3>

                                     </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a id="MainContent_hlWebsiteValue" href="http://www.ford.com" target="_blank">www.ford.com</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span id="MainContent_lblAssignedToValue">Name</span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>

Answer 1

您可以使用display: inline-block。如果您希望它们在顶部对齐，则必须使用vertical-align: top

<div>
     <div id="#first">
     <!-- image -->
     </div>
     <div id="second">
     <!-- table -->
     </div>
</div>

#first, #second {
    display: inline-block;
    vertical-align: top;
}

JSFiddle

Answer 2

display：inline-block的问题是不会忽略两个div元素之间的空格。结果是你的2个div的宽度+空白的宽度超过100％。这就是第二个div出现在第一个div之下的原因。

解决此问题的一种方法是在父元素上设置font-size：0，但还有其他解决方案：

http://davidwalsh.name/remove-whitespace-inline-block

不能让两个div彼此相邻

呈现html

2 个答案: