Как я могу расположить пролет так, чтобы он был выровнен по обе стороны от таблицы и над ней?
Вопрос
<div>
<span>left</span>
<span>right</span>
<!-- new line break, so no more content on that line -->
<table>
...
</table>
</div>
Как я могу расположить эти промежутки (их можно изменить на любой элемент) так, чтобы в зависимости от того, насколько велика таблица (нигде не определена и не должна быть), промежутки располагались только поверх левой части таблицы и правой части таблицы.
Пример:
a b table0 table1 table2
(где a - левый пролет, а b - правый пролет)
P.S.Вы можете изменить все, что угодно, во внутренней таблице html.
Решение
Не размещает их относительно, как и ответ Роба Аллена, они размещают их в дальних уголках браузера нет, в пределах ширины таблицы.
Ну, они будут привязаны к ширине своего контейнера, и ответ Роба делает ширину таблицы и контейнера 100%.
Единственное решение, которое я могу придумать с ходу, - это поместить в вашу таблицу строку с одним столбцом (охватывающую все столбцы) и в этой строке разместить ваши плавающие DIV.
Другие советы
<style type="text/css">
#wrapper, #top, #tableArea
{
width: 100%;
padding: 10px;
margin: 0px auto;
}
#top
{
padding: 0px;
}
#leftBox, #rightBox
{
margin: 0px;
float: left;
display: inline;
clear: none;
}
#rightBox
{
float: right;
}
</style>
<div id="wrapper">
<div id="top">
<div id="leftBox">A</div>
<div id="rightBox">b<</div>
</div>
<div id="tableArea">
<table> ... </table>
</div>
</div>
Я столкнулся с подобной проблемой и нашел решение.Это не зависит от ширины таблицы, но это немного сложнее.Это работает в любом браузере, включая IE5.5, IE6 и новее.
<style>
.tablediv {
float:left; /* this is a must otherwise the div will take a full width of our page and this way it wraps only our content (so only the table) */
position:relative; /* we are setting this to start the trickie part */
padding-top:2.7em; /* we have to set the room for our spans, 2.7em is enough for two rows otherwise try to use something else; for one row e.g. 1.7em */
}
.leftspan {
position:absolute; /* seting this to our spans will start our behaviour */
top:0; /* we are setting the position where it will be placed inside the .tablediv */
left:0;
}
.rightspan {
position:absolute;
top:0;
right:0;
}
</style>
<div class="tablediv">
<span class="leftspan">Left text</span>
<span class="rightspan">Right text <br /> with row</span>
<table border="1">
<tr><td colspan="3">Header</td></tr>
<tr><td rowspan="2">Left content</td><td>Content</td><td rowspan="2">Right content</td></tr>
<tr><td>Bottom content</td></tr>
</table>
</div>
<!-- If you don't want to float this on the right side of the table than you must use the clear style -->
<p style="clear:both">
something that continues under our tablediv
</p>
Если вы по какой-то причине не можете использовать float, вы можете использовать альтернативный стиль .tablediv, который я нашел по ошибке.Просто замените float:left; to display:inline-block;
Это работает во всех современных браузерах, но не в IE7 и ниже.
Теперь вы поняли мою точку зрения, и я уверен, что вы найдете любые другие решения.Только не забывайте, что .tablediv будет таким же длинным, как и внутреннее содержимое.Таким образом, размещение в нем абзаца приведет к растягиванию до большего размера, чем наша таблица.
если у вас есть divs вместо span, попробуйте float: left для диапазона a и float: right для диапазона b
<div>
<div style="float:left">a</div><div style="float:right">b</div>
<br style="clear: both">
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
</div>
Не размещает их относительно, как и ответ Роба Аллена, они размещают их в дальних уголках браузера, а не в пределах ширины таблицы.
Я все равно ничего не могу придумать, кроме как установить ширину таблицы на что-нибудь.В моем случае я выбираю 100%, который растягивается на ширину рэппера в 50em:
<style type="text/css">
#wrapper {
width: 1%;
min-width:50em;
padding: 10px;
}
#mainTable {
width:100%;
}
#leftBox {
float: left;
}
#rightBox {
float: right;
}
</style>
<div id="wrapper">
<div id="leftBox">A</div>
<div id="rightBox">b</div>
<br style="clear: both" />
some text some text some text some text some text <br />
some text some text some text some text some text <br />
some text some text some text some text some text
<table id="mainTable" border="1"><tr><td>test</td><td>test 2</td></tr></table>
</div>
@MattMitchell, возможно, у тебя там что-то есть.А затем просто используйте fload:влево и плавают вправо, я полагаю?