如何在不使用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.