私の1つのdivを左に浮かべることができず、もう1つ右に浮かびます。

Question

私はHTMLとCSSをかなり使い慣れていて、Web Designのコースで働いています。私はしたい。私の目標は、1つのdivフロートを左にし、もう1つのフロートを互いに隣に置くことです。最初のdivを左に浮かべることはできませんが、2番目のdivを右に浮かべることはできますが、最初のdivの下にとどまります。私は何かシンプルなものを見逃しているように感じるが、私はそれを理解できない。助けを事前に

#services { 
 
    float: left; 
 
} 
 
#contact { 
 
    float: right; 
 
    font-weight: bold; 
 
    font-style: italic; 
 
}

<main> 
 
    <div id="services"> 
 
    <h2>Services</h2> 
 

 
    <p>Lorem ipsum dolor sit amet, natoque pharetra. Neque vulputate wisi in. Per blandit viverra parturient vitae, maecenas orci turpis scelerisque odio, viverra enim. Condimentum id neque lobortis donec mauris, ridiculus nonummy vel massa vestibulum est. 
 
     Blandit non convallis primis conubia est varius, velit a parturient, dapibus dictumst eu aptent maecenas elit sodales, vel imperdiet enim vulputate lorem. Vel dictumst, lacus vel cum tempor suspendisse tellus, consectetuer vel orci, metus pellentesque, 
 
     nulla hac convallis nonummy tempus. Sollicitudin pulvinar eget scelerisque libero, nullam dis. Ipsum sit malesuada odio nisl. Amet donec, cursus vulputate eget mattis. Praesent velit dui ligula malesuada parturient tincidunt. Nisl ligula condimentum 
 
     id. Consectetuer arcu, elit massa nostra diam ut augue, vel dolor sollicitudin molestie.</p> 
 

 
    <ul> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     <li>Item 4</li> 
 
    </ul> 
 
    </div> 
 

 

 
    <div id="contact"> 
 

 
    <h2>Contact Us</h2> 
 

 
    <p>Contact Name 
 
     <br>Line 1 
 
     <br>Line 2 
 
     <br>Post Code 
 
     <br> 
 
     <a id="mobile" href="tel:111-123-4567">(111) 123-4567</a> 
 
     <span id="desktop">(111) 123-4567</span> 
 
     <br> 
 
     <a href="mailto:info@info.com">info@info.com</a> 
 
    </p> 
 
    <br> 
 
    </div> 
 
</main>

ありがとう！

Answer 1

2つのdivを互いの側にするには、最初のdiv（#services）幅を100％未満に設定して、他のdivが同じ行に収まるようにする必要があります。そのdiv自体によって占有されています。 CSSのみに変更を加えました。
変更されたコードはここにある：https://jsfiddle.net/admL7ss3/

#services { 
    float: left; 
    width:50%; 
    valign:top; 
} 
#contact { 
    font-weight: bold; 
    font-style: italic; 
} 
h2{ 
    margin-top:0px; 
} 

Answer 2

これらの幅を定義する必要があります。そのような幅の合計は100％です。あなたがそれらを多く伸ばしたくない場合は、max-widthのプロパティを使うことができます。

これらの浮動小数点数は、余白を持つべきではありませんが、それらに余白を与えることができます。また、borderのプロパティを使用している場合は、box-sizing:border-box;を使用することを忘れないでください。そうしないと、左手が右手を押し下げます。この例では、これを示すために境界線を使用しました。

はここに例を示します

#services{ 
 
    float:left; 
 
    width:70%; 
 
    margin:0; 
 
    padding:10px; 
 
    border:1px solid red; 
 
    box-sizing:border-box; 
 
} 
 
#contact{ 
 
    float: right; 
 
    font-weight: bold; 
 
    font-style: italic; 
 
    width:30%; 
 
    margin:0; 
 
    padding:10px; 
 
    border:1px solid green; 
 
    box-sizing:border-box; 
 
}

<main> 
 
      <div id="services"> 
 
       <h2>Services</h2> 
 

 
       <p>Lorem ipsum dolor sit amet, natoque pharetra. Neque vulputate wisi in. Per blandit viverra parturient vitae, maecenas orci turpis scelerisque odio, viverra enim. Condimentum id neque lobortis donec mauris, ridiculus nonummy vel massa vestibulum est. Blandit non convallis primis conubia est varius, velit a parturient, dapibus dictumst eu aptent maecenas elit sodales, vel imperdiet enim vulputate lorem. Vel dictumst, lacus vel cum tempor suspendisse tellus, consectetuer vel orci, metus pellentesque, nulla hac convallis nonummy tempus. Sollicitudin pulvinar eget scelerisque libero, nullam dis. Ipsum sit malesuada odio nisl. Amet donec, cursus vulputate eget mattis. Praesent velit dui ligula malesuada parturient tincidunt. Nisl ligula condimentum id. Consectetuer arcu, elit massa nostra diam ut augue, vel dolor sollicitudin molestie.</p> 
 

 
       <ul> 
 
        <li>Item 1</li> 
 
        <li>Item 2</li> 
 
        <li>Item 3</li> 
 
        <li>Item 4</li> 
 
       </ul> 
 
      </div> 
 

 

 
      <div id="contact"> 
 

 
       <h2>Contact Us</h2> 
 

 
       <p>Contact Name<br> 
 
       Line 1<br> 
 
       Line 2<br> 
 
       Post Code<br> 
 
       <a id="mobile" href="tel:111-123-4567">(111) 123-4567</a> 
 
       <span id="desktop">(111) 123-4567</span><br> 
 
       <a href="mailto:info@info.com">info@info.com</a> 
 
       </p><br> 
 
      </div> 
 
     </main>

Answer 3

あなたがサービスを提供し、1行のメインエリアの下のdivに連絡しませんでした。最初に与えなければなりません。最後に、float leftまたはright属性を処理します。