如何在不使用CSS的xhtml中創建2列布局
[英]How to create a 2 column layout in xhtml without CSS
問題描述
需要您的幫助，使用在線內聯樣式在XHTML中為2列布局編寫正確的代碼。
本質上，我正在嘗試重新設計公司Wiki的概述頁面，使其具有兩列布局，每一列中都有鏈接，這些鏈接將用戶帶到Wiki的不同部分。
由於我對XHTML不太了解，因此我在使用HTML +轉換器。 當我將HTML轉換為XHTML並將其輸入到Wiki頁面時，最終我的塊元素彼此重疊。 這是我寫的，任何指針將不勝感激：
<body>
<div id="left" style="display: block;">
<ul style="float:left; width:300px; height:400px;">
<a href="">
<img src=""> </a> </br>
<h4>Ways to Get Involved</h4> </br>
<a href="">Design Thinking with Jacquelyn</a> </br>
<a href="">Running Meetings </a> </br>
<a href="">Preparing and Running Playbacks</a> </br>
<a href="">Working with Users</a> </br>
<a href="">See all topics</a> </br>
<a href="">
<img src=""> </a> </br>
<a href=""> </br> Find and share useful tools for day-to-day design work</a> </br>
</ul>
</div>
<div id="right" style="float: left; width: 300px; height:400px;">
<ul style="float:left">
<a href="">
<img src=""> </a> </br>
<h4>Latest Posts</h4>
<a href="">Slimming down on features for a more delightful experience</a> </br>
<a href="">CitiBike: First 100 Days Visualized</a> </br>
<a href="">Development and Design Go Hand-in-Hand When Creating Smarter Cities</a> </br>
<a href="">Story 2.0: The Surprising Thing About the Next Wave of Narrative</a> </br>
<a href="">See all blog posts</a> </br>
<a href="">
<img src=""> </a> </br>
<a href="">Get engaged, educated and empowered to do Design Thinking</a>
無論如何-任何/所有幫助都非常感謝。 截至周五（今天）的EOD截止日期已到。
2 個解決方案
解決方案1
0 2013-11-01 16:45:25
采用 ：
style="float: left; width: 300px; height:400px; ”
僅在外部DIV上。 請勿漂浮物品（UL）
順便說一句：內聯樣式也是 CSS。
解決方案2
0 2013-11-01 16:49:46
您可以將容器div設置為width="45%" 。 這將使它們既適合屏幕的整個100％，又可以留出一定的填充空間。
我想，左右浮動一個會有所幫助。 我寧願使用display:inline-block; 雖然。
在這里， 擺弄小提琴 。
如何在不使用網格的情況下使用 css 創建 3 列布局（對於 ie 10 兼容性）
[英]How to create 3 column layout using css without using grid(For ie 10 compatibility)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.