このレイアウトはCSSで行うことができますか？

CSSで次のレイアウトを実行できますが、絶対/相対配置は使用できませんか？
この謎を数日間解決しようとしましたが、ボックス10に収まりませんでした。このレイアウトはCSSで行うことができますか？

解決策のcss + htmlファイルも提供してください。だから我々は解決策について話すことができる。

is it possible?

出典

2009-07-30 Ender Özcan

これは「ユーモア」タグを持っていないでしょうか？ ;） – UpTheCreek

可能です。それを解決しようとします。 –

高さは固定されていますか？レイアウトはどのように振る舞いますか？または、すべての次元が固定されていますか？現在のところ、単一のソリューションを提供するには十分な情報がないと思います。 – edeverett

私はthis source codeを使用してこの問題を解決しました。

alt text http://rabu4g.bay.livefilestore.com/y1p4IhbA7NzQWn7G3wY8dkhOEGawswOMPZQ8MXUotkWtx9ppwfcILzwVb3xXKL19d1J-U5d6G7jaftIHjdcwU8_fTFYyJWtaj6t/css.png

更新

Can you explain how browser renders floating item?

PS。私の主なテクニックは、負の左マージン&グルーピングdivです。これは相対位置と絶対位置を使用せずにこの問題を解決する単一の方法です。

出典

2009-07-30 09:47:07

IE7でT10の幅が正しくありません：P – Thinker

IE8とFF 3.5でテストします。さらに、IE7はCSS 2.1標準を完全に正しく表示することはできません。しかし、IE8はそれをより良く表示します。 –

また、Windows Server 2008 R2 64ビットを使用しているためIE7ブラウザをテストできません。ごめんなさい。 –

あなたはfloatを試みることができる：すべてのボックスを左に。ボックス6-9に負の上マージンを付けます。そして明らかに：左のボックス5

それがうまくいくかどうかはまだ分かりませんが、試してみる価値はあります。

出典

2009-07-30 08:51:05

賢明な提案のように聞こえます。 – Noldorin

私はそれがポジションを与えるための斬新な方法だと思います。だから私はこのソリューションを使いたくない。 –

@Ender、使用できるCSSプロパティは何ですか？位置と浮動小数点が一致しない場合、オプションは残りません。しかし、これは恐らく問題を解決できなくするでしょう。 –

すべてが実行可能である必要があります。 Jim Neathが言及したように、浮動小数点数の左、クリア、および負の上余白でボックス1〜9を行うことができます。

ボックス10の場合、通常ボックス9の右側に表示されるように左に浮かべることができますが、負の左マージンを適用して7の横に広げます（8と9の幅に基づいて）。

出典

2009-07-30 08:55:25

マイソリューション：あなたは領域を定義し、HTML + CSSを生成するために、Photoshopや他のソフトウェアを使用することができます出発点として

<style type="text/css"> 

div { width:524px; height:142px; } 
div div { float:left; color:white; text-align:center;} 

#objX01 { background:#ed4728; width:91px;height:90px; } 
#objX02 { background:#c9b7c3; width:145px;height:50px; } 
#objX03 { background:#d7446d; width:168px;height:37px; } 
#objX04 { background:#2cdb54; width:120px;height:29px; float: right;} 
#objX09 { background:#1e5a82; width:47px;height:90px; float: right;} 
#objX08 { background:#224456; width:128px;height:82px; float: right;} 
#objX07 { background:#3240c0; width:64px;height:105px; float: right;} 
#objX06 { background:#5ee1b1; width:118px;height:92px; float: right;} 
#objX05 { background:#e0abce; width:167px;height:52px; } 
#objX10 { background:#ec2df6; width:175px;height:23px; float: right;} 
</style> 

<div style="position:relative; margin:0 auto"> 
    <div id="objX01">01</div> 
    <div id="objX02">02</div> 
    <div id="objX03">03</div> 
    <div id="objX04">04</div> 
    <div id="objX09">09</div> 
    <div id="objX08">08</div> 
    <div id="objX07">07</div> 
    <div id="objX06">06</div> 
    <div id="objX05">05</div> 
    <div id="objX10" style="position:absolute; left:349px; top:119px">10</div> 
</div>

出典

2009-07-30 09:24:29

＃objX10では絶対位置は使用できません。私はあなたのコードが大好きです。とても清潔です。 –

objX10スタイルを「margin-top：-23px;」に変更してください。すべてうまく動作します。しかし、それはやはりマイナスマージン/パディングを使用します。 –

。

生成されるコードはあまりクリーンではありませんが、変更を開始するのに適しています。

出典

2009-07-30 09:29:03 HyLian

これは不可能です。 htmlを使用できるプログラムのほとんどは、この問題を解決するために絶対的な位置を占めているからです。 –

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/reset.css" /> 
     <style type="text/css"> 
      div#container { width: 500px; height: 143px; } 
      div#container div { float: left; text-align: center; color: #ffffff; } 
      div#t01 { width: 85px; height: 85px; background-color: #ee4727; } 
      div#t02 { width: 138px; height: 49px; background-color: #cab6c2; } 
      div#t03 { width: 160px; height: 35px; background-color: #d7446e; } 
      div#t04 { width: 113px; height: 27px; background-color: #2cda54; } 
      div#t05 { width: 159px; height: 51px; background-color: #e1abcf; clear: left; } 
      div#t06 { width: 111px; height: 87px; background-color: #5de1b0; margin-top: -36px; } 
      div#t07 { width: 62px; height: 101px; background-color: #323fbf; margin-top: -50px; } 
      div#t08 { width: 120px; height: 77px; background-color: #234457; margin-top: -50px; } 
      div#t09 { width: 44px; height: 85px; background-color: #1f5a82; margin-top: -58px; } 
      div#t10 { width: 164px; height: 24px; background-color: #eb2cf4; } 
     </style> 
     <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="t01">T01</div> 
      <div id="t02">T02</div> 
      <div id="t03">T03</div> 
      <div id="t04">T04</div> 
      <div id="t05">T05</div> 
      <div id="t06">T06</div> 
      <div id="t07">T07</div> 
      <div id="t08">T08</div> 
      <div id="t09">T09</div> 
      <div id="t10">T10</div> 
     </div> 
    </body> 
</html>

IE8、FF2、FF3、Chrome、Safari、Operaで動作します。私にはわからない理由でIE6とIE7では動作しません。

（幅と余白が少しずれることがあり、画像がQUAL低かったと私はちょうどPhotoshopで魔法の杖ツールを使用）

出典

2009-07-30 10:50:40

このレイアウトはCSSで行うことができますか？

答えて

関連する問題