Как сохранить панель под двумя другими панелями, когда окно стало меньше? - PullRequest
Новая
       5

Как сохранить панель под двумя другими панелями, когда окно стало меньше?

0 голосов
/ 08 января 2010

У меня три панели вот так: 

 ___    _________    ___
|   |  |         |  |   |
|   |  |         |  |   |
|   |  |         |  |   |
|   |  |         |  |   |
|___|  |_________|  |___|

Но если я немного укоротю окно, средняя панель опустится ниже двух боковых панелей: 

 ___                ___
|   |              |   |
|   |              |   |
|   |              |   |
|   |              |   |
|___|              |___|
 _________ 
|         |
|         |
|         |
|         |
|_________|

Вот мой код 

<style>
   .SidePanel {
       background-color:#9999CC;
       width:100px;
       height:597px;
   }
</style>

<div style="text-align:center;">
         <div style="float:left">
             <asp:Panel ID="Panel4" runat="server" CssClass="SidePanel" BorderColor="DarkBlue" BorderWidth="2px"/>
         </div>

         <div style="float:right">
                    <asp:Panel ID="Panel5" runat="server" CssClass="SidePanel" BorderColor="DarkBlue" BorderWidth="2px"/> 
         </div>

         <div style="display:inline;">
             <asp:Panel ID="Panel0" runat="server" BackColor="#9999CC" BorderColor="DarkBlue" BorderWidth="2px" Width="900">
                 ...content...
             </asp:Panel> 

            </div>
</div>

Как бы мне помешать этому?

РЕДАКТИРОВАТЬ: Вот изменения, которые я сделал из ответов. 

<style>
  .SidePanel {
      background-color:#9999CC;
      height:597px;
  }
</style>

<div style="text-align:center; min-width:1024px; width:100%;">
            <div style="float:left; width:10%">
                <asp:Panel ID="Panel4" runat="server" CssClass="SidePanel" BorderColor="DarkBlue" BorderWidth="2px"/>
            </div>

            <div style="float:right; width:10%">
                <asp:Panel ID="Panel5" runat="server" CssClass="SidePanel" BorderColor="DarkBlue" BorderWidth="2px"/> 
            </div>

            <div style="width:70%">
                <asp:Panel ID="Panel0" runat="server" BackColor="#9999CC" BorderColor="DarkBlue" BorderWidth="2px" style="width:100%;">

Ответы [ 3 ]

2 голосов
/ 08 января 2010

Вот что у меня есть: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Three Little Panels, All in a Row</title>
<style>
#container
{
min-width:800px;
overflow:auto;
}
.littlePanels
{
float:left;
width:100px;
background-color:#999900;
}
.bigOlePanel
{
float:left;
width:600px;
background-color:#CC9966
}
</style>
</head>

<body>
<div id="container">
<div class="littlePanels">&nbsp;</div>
<div class="bigOlePanel">&nbsp;</div>
<div class="littlePanels">&nbsp;</div>
</div>
</body>
</html>

Надеюсь, это работает!

1 голос
/ 08 января 2010

Кажется, что средняя панель была сжата. Чтобы быть уверенным, добавьте упаковочный div с явной шириной (скажем, 1000), а все остальные присвойте также явную ширину. Имейте в виду, что у вас есть граница в 2 пикселя - вычтите 4 суммы из каждого.

И наконец - вместо 'inline' среднего div, проверьте возможность присвоить ему 'float = left'.

1 голос
/ 08 января 2010

Вы можете попробовать обернуть его с минимальной шириной. Должен быть лучший способ справиться с этой ситуацией. Можете ли вы показать полный макет? Ссылка на живую страницу или схему расположения?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...