如何将其转换为CSS [英] How to convert this to CSS

问题描述

在我的网站（ www.classiccat.net ）中，基本布局包含两个

元素：

- 一个中心的块，固定为720

- 一个右对齐的Google广告块。


当访问者的屏幕宽度小于720时，Google

块就会被推离屏幕右侧。这是

预期的行为。使用桌子很容易制作。但我找不到

一种在CSS中获得相同效果的方法。它会将

广告推到主要区块下方（显示：内联和浮动）或 -

更糟糕 - 它会让两者相互重叠（用

位置：绝对）。


有没有办法在CSS中进行这种布局？


谢谢，musicmouse

In my website (www.classiccat.net) the basic layout consists of two
elements:
- a centered block that has a fixed with of 720
- a right-aligned Google advertising block.

When the visitor has a screen that is less than 720 wide the Google
block is simply pushed off the screen to the right. This is the
intended behaviour. With tables it was easy to make. But I cannot find
a way to get the same effect in CSS. Either it will push the
advertisement below the main block (with display:inline and float) or -
even worse - it will let the two overlap each other (with
position:absolute).

Is there a way to make this layout in CSS?

Thanks, musicmouse

推荐答案

musicmouse写道：

musicmouse wrote:

在我的网站上（ www.classiccat.net ）基本布局包含两个元素：
- 一个居中的块具有固定的720
- 一个右对齐的Google广告块。

如果访问者的屏幕宽度小于720，Google
块就会被推送屏幕右侧。这是
预期的行为。使用桌子很容易制作。但我找不到
在CSS中获得相同效果的方法。要么将
广告推到主要区块下面（显示：内联和浮动），要么 - 更糟糕 - 它会让两者相互重叠（
位置：绝对）。

有没有办法在CSS中进行这种布局？

In my website (www.classiccat.net) the basic layout consists of two
elements:
- a centered block that has a fixed with of 720
- a right-aligned Google advertising block.

When the visitor has a screen that is less than 720 wide the Google
block is simply pushed off the screen to the right. This is the
intended behaviour. With tables it was easy to make. But I cannot find
a way to get the same effect in CSS. Either it will push the
advertisement below the main block (with display:inline and float) or -
even worse - it will let the two overlap each other (with
position:absolute).

Is there a way to make this layout in CSS?

可能 - 但到目前为止我还没有看到你的尝试。

我的第一个想法（基于Google广告列宽150px）：

HTML：

< div id =" container" >

< div id =" content">

页面内容

< / div>

< div id =" google">

googe ads

< / div>

< / div>


CSS：

#container {

宽度：870px;

保证金：自动;

}

#content {

宽度：720px;

float：left;

}

#google {

margin-left：720px;

}


或者，如果你坚持要谷歌广告最右边的

实际页面以水平空间的其余部分为中心：

HTML：

< div id =" container" ;>

< div id =" content">

页面内容

< / div>

< / div>

< div id =" google">

googe ads

< / div>


#container {

margin-right：150px;

}

#content {

宽度：720px;

保证金：自动;

}

#google {

位置：绝对;

右：0;

宽度：150px;

}


以上测试都没有 - 这是你的工作;-)

#container可能需要一个实际的边框（将它设置为与
$ b $相同的颜色对于IE浏览器，如果你不想看到它的背景，但我不确定。试试

如果没有它就不能工作。


-

Els http://locusmeus.com/

Sonhos vem。 Sonhos v？£。 O resto ?? crisfeito。

- Renato Russo -

Probably - but so far I haven''t seen your attempt yet.
My first idea (based on a Google ads column width of 150px):
HTML:
<div id="container">
<div id="content">
page content
</div>
<div id="google">
googe ads
</div>
</div>

CSS:
#container{
width:870px;
margin:auto;
}
#content{
width:720px;
float:left;
}
#google{
margin-left:720px;
}

Or, if you insist on having the google ads to the far right with the
actual page centered in the remainder of the horizontal space:
HTML:
<div id="container">
<div id="content">
page content
</div>
</div>
<div id="google">
googe ads
</div>

#container{
margin-right:150px;
}
#content{
width:720px;
margin:auto;
}
#google{
position:absolute;
right:0;
width:150px;
}

None of the above tested - that''s your job ;-)

#container may need an actual border (set it to the same colour as the
background if you don''t want it visible) for IE, but I''m not sure. Try
that if it doesn''t work without.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos v?￡o. O resto ?? imperfeito.
- Renato Russo -

2006年1月7日星期六13:26:20 +0100，musicmouse< wi *** ****@planet.nl>写道：

On Sat, 07 Jan 2006 13:26:20 +0100, musicmouse <wi*******@planet.nl> wrote:

在我的网站上（ www.classiccat.net ）基本布局包含两个
元素：
- 一个固定为720的中心块 - 一个右对齐的Google广告块。
块就会被推离屏幕右侧。这是
预期的行为。使用表格很容易制作。

有没有办法在CSS中进行这种布局？

In my website (www.classiccat.net) the basic layout consists of two
elements:
- a centered block that has a fixed with of 720
- a right-aligned Google advertising block.

When the visitor has a screen that is less than 720 wide the Google
block is simply pushed off the screen to the right. This is the
intended behaviour. With tables it was easy to make.

Is there a way to make this layout in CSS?

你要求模拟一张桌子，那你为什么不这样做呢：

< URL：http：//home.wanadoo.nl/b.de.zoete/_test/simulating_tables.html>

-

， - - < - @ - PretLetters：''woest wyf''，遇见vele interesses：----------。

|博客| http://home.wanadoo.nl/b。 de.zoete / _private / weblog.html |

| webontwerp | http://home.wanadoo.nl/b。 de.zoete / html / webontwerp.html |

| zweefvliegen | http://home.wanadoo.nl/b。 de.zoete / html / vliegen.html |

` --------------------------- ----------------------- - < - @ ------------''

You ask for simulating a table, so why don''t you just do that:
<URL:http://home.wanadoo.nl/b.de.zoete/_test/simulating_tables.html>
--
,-- --<--@ -- PretLetters: ''woest wyf'', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------''

Barbara de Zoete写道：

Barbara de Zoete wrote:

2006年1月7日星期六13:26:20 +0100，musicmouse< wi ******* @ planet。 NL>写道：

On Sat, 07 Jan 2006 13:26:20 +0100, musicmouse <wi*******@planet.nl> wrote:

在我的网站上（ www.classiccat.net ）基本布局包含两个
元素：
- 一个固定为720的中心块 - 一个右对齐的Google广告块。
块就会被推离屏幕右侧。这是
预期的行为。使用表格很容易制作。

有没有办法在CSS中进行这种布局？

In my website (www.classiccat.net) the basic layout consists of two
elements:
- a centered block that has a fixed with of 720
- a right-aligned Google advertising block.

When the visitor has a screen that is less than 720 wide the Google
block is simply pushed off the screen to the right. This is the
intended behaviour. With tables it was easy to make.

Is there a way to make this layout in CSS?

你要求模拟一张桌子，所以为什么要'你只是这样做：
< URL：http：//home.wanadoo.nl/b.de.zoete/_test/simulating_tables.html>

You ask for simulating a table, so why don''t you just do that:
<URL:http://home.wanadoo.nl/b.de.zoete/_test/simulating_tables.html>

有趣的是，我刷新后只看起来像你想要的那样。


试试这个：清除你的Fx缓存并查看页面。广告显示在内容下面

。刷新，广告也向右移动。每个

时间可重现。


在本地查看，这不会发生。


-

Gus

Interesting that it only looked as you wanted after I refreshed.

Try this: Clear your Fx cache and look at the page. The Ads appear below
the content. Refresh and the Ads move too the right. Reproducible every
time.

Viewed locally, this does not happen.

--
Gus

这篇关于如何将其转换为CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！