html - 不能让两个div彼此相邻

Question

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

如果我这样使用 float :

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

我得到以下布局:

请注意带有文字的表格离图片太远了...我想将它移到图片旁边。我尝试使用 display: inline-block 来做到这一点，但随后数据表将位于图片旁边，但它会位于 div 的底部而不是顶部(可能是由于图片的大小)。如果有帮助，图片的最大尺寸应仅为 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