0

私はここと HTML/CSS に慣れていないので、この問題について信じられないほど馬鹿げている場合はご容赦ください。無駄に答えを探したけど、ついに敗北を認めて尋ねる...

float を使用して、コンテナに 2 つの div ボックスを並べて配置しています。そこに問題はありません（願っています）。右側の div ボックスを再度分割したいと思います。問題ないだろうと思っていたのですが、それは間違いでした。インクルード リスト (.includebox) を .helpbox2 内の除外リスト (.excludebox) のパートナーの隣に配置することはできません。

関連するコードと思われるものをカット アンド ペーストしましたが、いつでも追加できます。問題は www.exceptionalcvs.co.uk/help_cv_basics.html にありますが、私が再びいじくり回さない限り、これをできるだけ控えます。

HTML

<body>
  <div class="container">
    <div class="margins">
      <div class="helpbox1">
        <h2>1. Introduction</h2>
        </p><p>
        <p>text here</p>
      </div>
      <div class="helpbox2">
        <h2>2. What do I put in my CV&#63;</h2>
        <p></p>
        <div class="includebox">Include list
          <ul>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="excludebox">Exclude list
          <ul>
            <li>Passport number</li>
            <li>Driving license number</li>
            <li>Social Security number</li>
            <li></li>
            <li>Martial status</li>
            <li></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

CSS

.container{width:960px;margin:0 auto}
.margins{margin-left:16px;margin-right:16px}
.helpbox2{position:relative;top:0;left:0;width:396px;float:right;padding-right:12px;padding-left:12px;padding-bottom:10px;border-bottom:1px solid #999;border-left:2px solid #999;border-top:2px solid #999;border-right:1px solid #999;background:#efe7ca;margin-left:5px}

.incudebox{position:relative;left:0px;right:0px;width:100px;float:left;margin:0px auto;}
.excludebox{position:relative;left:0px;right:0px;vertical-align:top;width:100px;float:right;margin:0px}

コードが少し乱雑である場合はお詫び申し上げます。問題の画像はこちら: http://www.exceptionalcvs.co.uk/img/div_problem.jpg

4

2 に答える 2