这可能听起来很傻但不能自己做:( 需要你帮助的人。 如何使用DIV(+ CSS)代替TABLE来激活标记?
<table>
<tr>
<td>
<img src="logo_left.gif" />
</td>
<td align="center">
<p><strong>THE TITLE!!!</strong></p>
</td>
<td>
<img src="logo_right.gif" />
</td>
</tr>
</table>
提前致谢!
有些人问我发布了迄今为止我尝试过的内容...... CSS
<style type="text/css">
.header
{
border: 1px solid black;
border-bottom-width: 0px;
background-image: url("Images/spriterepeatx.png");
background-position: 0 -85px !important;
background-repeat: repeat-x;
background-color: transparent;
height: 76px;
font-family: Arial,Helvetica,sans-serif;
}
.LeftLogo a
{
display: inline;
float:left;
height:25px;
margin: 25px 0 25px 25px;
position:relative;
width:227px;
background: url("Images/left_logo.gif") no-repeat scroll 0 0 transparent;
}
.RightLogo
{
width:100px;
height:100px;
background: url("Images/right_logo.png") no-repeat scroll 0 0 transparent;
}
p.promo {
font-size: 150% !important;
line-height: 22px;
margin-top: 25px;
text-align: center;
white-space:nowrap;
}
</style>
HTML:
<body> <div class='header'> <div class="LeftLogo"><a title="My company logo" href="http://www.mycompany.com"></a></div> <div><p class="promo"><strong>MYProduct</strong> - Superb product</p></div> <div class="RightLogo"></div> </div> </body>
答案 0 :(得分:4)
首先,您首先为div设置display: inline
样式,因为默认情况下它是一个“块”,然后您可以根据需要定位每个div。
“block”div占据整个水平空间,但是使用“inline”可以指定它需要占用的空间。没有给出“px”或“百分比”的宽度和限制取决于你的创造力。
您在div中的上述代码如下所示:
<div class="divcolumn">
<img src="logo_left.gif" />
</div>
<div class="divcolumn" style="text-align:center">
<p><strong>The Title!!!</strong></p>
</div>
<div class="divcolumn">
<img src="logo_right.gif" />
</div>
现在指定样式:
.divcolumn {
display: inline;
}
您甚至可以为每个列编写单独的样式,例如“divcolumn-right”,“divcolumn-center”和“divcolumn-left”,并指定不同的样式。例如,获取液体布局分别指定宽度为“30%”,“40%”和“30%”。
答案 1 :(得分:1)
我自己用css来完成这个任务。我有一般的表格,行和单元格样式,然后我合并了特定的其他样式用于演示(交替的行颜色,选定的行粗体等)。这是我的一个表(擦洗)的html:
<div class="table grid">
<div class="tr gridHeader">
<div class="tdColumn1">
<input type="checkbox" id="chkSelectAll" />
</div>
<div class="tdColumn2">
<strong>Header1</strong>
</div>
<div class="tdColumn3">
<strong>Header2</strong>
</div>
<div class="tdColumn4">
<strong>Header3</strong>
</div>
<div class="tdColumn5">
<strong>Header4</strong>
</div>
</div>
<div class="tr tdWhite">
<div class="tdColumn1">
<input type="checkbox" name="checkbox1" />
</div>
<div class="tdColumn2">
<p>Data1</p>
</div>
<div class="tdColumn3">
<p>Data2</p>
</div>
<div class="tdColumn4">
<p>Data3</p>
</div>
<div class="tdColumn5">
<p>Data4</p>
</div>
</div>
<div class="tr tdGrey">
<div class="tdColumn1">
<input type="checkbox" name="checkbox1" />
</div>
<div class="tdColumn2">
<p>Data1</p>
</div>
<div class="tdColumn3">
<p>Data2</p>
</div>
<div class="tdColumn4">
<p>Data3</p>
</div>
<div class="tdColumn5">
<p>Data4</p>
</div>
</div>
</div>
这是控制这些div的布局的css。我省略了大多数与外观相关的东西(字体,颜色等)。你必须自己调整宽度,百分比等。
div.table
{
display: table;
}
div.tr
{
display: table-row;
}
div.tdColumn1, div.tdColumn2, div.tdColumn3, div.tdColumn4, div.tdColumn5
{
display: table-cell;
padding: 4px;
}
div.tdColumn1
{
width: 25px;
}
div.tdColumn2
{
width: 20%;
}
div.tdColumn1, div.tdColumn2, div.tdColumn4, div.tdColumn5
{
vertical-align: middle;
}
div.tdColumn1, div.tdColumn5
{
text-align: center;
}
答案 2 :(得分:0)
除了Navneeth的回答。
<tr>
是一行,<td>
是一列。
您可以通过声明多种样式来定位<div>
,然后将其应用于<div>
。
<div class="somestyle-definition">
</div>
然后在样式表中
.somestyle-definition
{
width:100%;
border-bottom:solid 2px white;
}
答案 3 :(得分:0)
有很多方法可以实现这一目标。一个起点可能是:
<div class="float-left">
<img src="logo_left.gif" />
</div>
<div class="float-left">
<p><strong>THE TITLE!!!</strong></p>
</div>
<div class="float-left">
<img src="logo_right.gif" />
</div>
然后在你的CSS中:
.float-left {
float:left;
}
这只会使你的所有元素彼此浮动。 那不是很漂亮和语义不正确,但它确实有效。
答案 4 :(得分:0)
HTML:
<h1>The title</h1>
CSS:
h1 {
position: relative;
height: 100px;
line-height: 100px;
}
h1::before {
position: absolute; top: 0; left: 0;
content: url( http://placekitten.com/100/100 );
}
h1::after {
position: absolute; top: 0; right: 0;
content: url( http://placekitten.com/120/100 );
}