Не могу получить два div рядом друг с другом

0

Я могу получить два div рядом друг с другом, используя display: inline-block; в атрибуте style, но затем div на правой стороне выравнивается по дну, а не вверху. Поэтому я попробовал плавать в 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>

Я получаю следующий макет:

Изображение 174551

Обратите внимание, что таблица с текстом так далеко от картинки... Я хотел бы переместить ее прямо рядом с изображением. Я попытался сделать это, используя display: inline-block, но тогда таблица данных будет рядом с изображением, но она будет сидеть внизу дэва, а не сверху (вероятно, из-за размера рисунка). Если это помогает, максимальный размер изображения должен быть только 256 пикселей x 256 пикселей.

Может ли кто-нибудь помочь мне с моим CSS/HTML, чтобы сделать это правильно?

Rendered 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>
  • 1
    Пожалуйста, опубликуйте предоставленный HTML.
  • 0
    Вы пробовали "float: 'left'" на обоих div?
Показать ещё 4 комментария
Теги:

2 ответа

2
Лучший ответ

Вы можете использовать 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

Поделиться
  • 0
    Идеально, мне не хватало вертикального выравнивания: верх.
0

Проблема с отображением: inline-block заключается в том, что пробел между двумя вашими элементами div НЕ игнорируется. В результате ширина ваших 2 divs + ширина пробела составляет более 100%. Вот почему второй div появляется под первым.

Один из способов исправить это - установить размер шрифта: 0 в родительском элементе, но есть и другие решения:

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню