Question

目前我有一个事件列表，如下所示：

每个事件都放在自己的div中。

我想在左侧放置前4行，在右侧放置Sport，Location，Date，Tickets Available和Ticket end date。（“监视我的事件”的一方开启并不重要，中心也很好）

我尝试将它们分组为div，其中id =“left和id =”right“然后使用CSS浮动，但这只是搞砸了所有内容。

我试图把这个html：

            <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>

使用这个CSS：

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

但这是结果：

Answer 1

这种情况正在发生，因为您没有为left和right定义宽度。给他们width:50%;

此外，您应该将id="left"和id="right"更改为class="left"和class="right"，否则将会有多个具有相同ID的元素，而且不是很好。< / p>

在你的php中，当你运行while循环时，重复boxed，其中包含.left和.right，而不是继续添加.left和.right一个.boxed，否则它看起来不会很好。

我使用.boxed:after{}的最后一件事，当其中的内容与float一起定位时，这一点非常重要，这样才能清除它们并且不会缩短内容。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我建议您只使用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;
}

<?xml version="1.0" encoding="utf-8"?>
   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="ai.serna.chargerautooff">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <service
            android:name=".MyService"
            android:enabled="true"
            android:exported="true" />

        <receiver
            android:name=".MyReceiver"
            android:enabled="true"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.HEADSET_PLUG" >
                </action>
                <action android:name="android.intent.action.BATTERY_CHANGED" >
                </action>
                <action android:name="ai.serna.chargerautooff.DONE_TEST">
                </action>

            </intent-filter>
        </receiver>
    </application>`

   </manifest>

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

Answer 3

你错过了＆＃34;宽度＆＃34;，你应该为你的div选择一个特定的或百分比数字，所以它看起来像这样

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

如何在div标签内浮动元素

3 个答案: