html - 如何不使用绝对定位 CSS

Question

我目前正在处理一个旧网站，该网站是用一些旧的蹩脚的 WYSIWYG 编辑器创建的。我是 web-dev 的新手，仍在尝试正确定位元素。我目前的问题是，根据我的阅读，使用绝对定位是不好的，但你会如何改变它？

所以这是旧代码:

 <div id="wb_Text1" 
    style="margin:0;
    padding:0;
    position:absolute;
    left:187px;
    top:24px;
    width:83px;
    height:147px;
    text-align:left;
    z-index:1;
    border:0px #C0C0C0 solid;
    overflow-y:hidden;
    background-color:transparent;
">
<div style="font-family:'.Helvetica Neue DeskInterface';font-size:15px;color:#000000;">
  <div style="text-align:left">
    <span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
        <strong>W</strong>
    </span>
  </div>
  <div style="text-align:left">
    <span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
        <strong>A</strong>
    </span>
  </div>
  <div style="text-align:left">
    <span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
        <strong>C</strong>
    </span>
  </div>
</div>

我想出的替代方法是:

HTML

<div class="logo-ul">
  <ul>
    <li>W</li>
    <li>A</li>
    <li>C</li>
  </ul>
</div>

CSS

.logo-ul {
list-style-type: none;
color: white;
font-size: 2em;
z-index:24;
float: right;
margin-right: 80%;
}

这看起来很好，直到你折叠窗口并且它散架:( 哈哈。

你可以在这里看到我在做什么http://media.wacmotorcycles.co.uk/

请问我应该怎么写？

谢谢。

Answer 1

尝试将 #logo 更改为

#logo {
    max-width: 165px;
    max-height: 171px;
    margin: 0.75em 0;
    float: left;
}

并且，.logo-ul 到

.logo-ul {
    list-style-type: none;
    color: white;
    font-size: 2em;
    z-index: 24;
    float: left;
}