divタグ

Question

内の要素をフロートする方法現在、私はこのようになりますイベントのリストを持っています。

私は最初の4行を左側に置き、スポーツ、場所、日付、利用可能なチケット、およびチケットの終了日を右側に置きます。 （私のイベントを監視している側は問題ありませんが、センターも問題ありません）

id = "left、id =" right "のdivにグループ化してCSSでフロートしましたが、それはちょうど、すべてを台無しに

を、私はこのHTMLを入れて試してみました：このCSSで

  <div class="boxed"> 
       <div id="left"> 
        <h3><u><?php echo $event_id; ?></u></h3> 
        <h3><u><?php echo $event_name; ?></u></h3> 
        <h4>Hosted By <?php echo $username; ?></h4> 
        <p><?php echo $description; ?></p> 

        <?php 
        if($_SESSION["user_id"] != $event_user_id){ ?> 
        <h5><a href="ticket_booking.php?e_id=<?php echo $event_id ?>&e_date=<?php echo urlencode($event["event_date"]) ?>" class="link">Book Ticket</a></h5> 
        <?php } 
        else{ ?> 
        <h5><a href="my_account.php" class="link">Monitor my event</a></h5> 
       </div> 
       <?php 
        } 
       ?> 

       <div id="right"> 
        <h4>Sport: <?php echo $sport; ?></h4> 
        <h4>Location: <?php echo $location; ?></h4> 
        <h4>Date: <?php echo $event_date; ?></h4> 
        <h4>Tickets available: <?php echo $number_of_tickets; ?></h4> 
        <h4>Ticket end date: <?php echo $tick_end_date; ?></h4> 
       </div> 
      </div> 

を：

.boxed{ 
border: 2px solid blue; 
} 
#left { 
float: left; 
} 
#right { 
float: right; 
} 

しかし、これは結果であった：

Answer 1

これは、leftとrightの幅を定義していないために起こります。彼らはwidth:50%;

また、あなたがそうでなければ、複数の同じidを持つ要素、それは良くないがあるだろう、class="left"とclass="right"にid="left"とid="right"を変更する必要がありますする必要があり与えます。代わりに、単一の.boxedに.leftと.rightを追加し続けるのあなたのPHPで

、あなたはそれで.leftと.rightとwhileループの繰り返しboxedを実行し、それ以外の場合は良く見えません。

私は最後に.boxed:after{}を使用していますが、それはコンテンツがfloatとなっている場合に重要なので、クリアしてコンテンツを短くしません。

.boxed{ 
 
    width:100%: 
 
    margin:0; 
 
    padding:5px; 
 
    box-sizing:border-box; 
 
    border:2px solid blue; 
 
    margin-bottom:20px; 
 
} 
 
.left { 
 
    float:left; 
 
    width:50%; 
 
    margin:0; 
 
    padding:10px; 
 
    box-sizing:border-box; 
 
} 
 
.right { 
 
    width:50%: 
 
    float:right; 
 
    margin:0; 
 
    padding:10px; 
 
    box-sizing:border-box; 
 
} 
 
.boxed:after { 
 
    visibility: hidden; 
 
    display: block; 
 
    font-size: 0; 
 
    content: " "; 
 
    clear: both; 
 
    height: 0; 
 
}

<div class="boxed"> 
 
    <div class="left"> 
 
    <h3><u>1</u></h3> 
 
    <h3><u>Query's Football Event</u></h3> 
 
    <h4>Hosted By Querty</h4> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p> 
 

 
    <h5><a href="ticket_booking.php" class="link">Book Ticket</a></h5> 
 
    <h5><a href="my_account.php" class="link">Monitor my event</a></h5> 
 
    </div> 
 
    <div class="right"> 
 
    <h4>Sport: Football</h4> 
 
    <h4>Location: Pnjnsasasn</h4> 
 
    <h4>Date: 19:01:16</h4> 
 
    <h4>Tickets available: 59</h4> 
 
    <h4>Ticket end date: 17:01:16</h4> 
 
    </div> 
 
</div> 
 
<div class="boxed"> 
 
    <div class="left"> 
 
    <h3><u>2</u></h3> 
 
    <h3><u>Query's Football Event</u></h3> 
 
    <h4>Hosted By Querty</h4> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p> 
 

 
    <h5><a href="ticket_booking.php" class="link">Book Ticket</a></h5> 
 
    <h5><a href="my_account.php" class="link">Monitor my event</a></h5> 
 
    </div> 
 
    <div class="right"> 
 
    <h4>Sport: Football</h4> 
 
    <h4>Location: Pnjnsasasn</h4> 
 
    <h4>Date: 19:01:16</h4> 
 
    <h4>Tickets available: 59</h4> 
 
    <h4>Ticket end date: 17:01:16</h4> 
 
    </div> 
 
</div>

Answer 2

私はtext-alignを使用してちょうどお勧めします。 div要素はブロックレベルで幅全体を占めますので、テキストをどこに配置するかを指定するだけです。

<div id="container"> 
    <div>asdf</div> 
    <div>hjkl</div> 
    <div>qwer</div> 
</div> 

#container div { 
    background: blue; 
    margin: 10px; 
} 

#container div:nth-child(2) { 
    text-align: center; 
} 

#container div:nth-child(3) { 
    text-align: right; 
} 

https://jsfiddle.net/s9Lxmh95/1/

Answer 3

あなたは、あなたがあなたのdivに固有またはパーセント数を "幅" を選択する必要があり不足しているので、そこにこの

http://www.byol.com.au/images/tutorial-dreamweaver-floating-div-fixed.gif