Question

我已经阅读了一些类似的问题并在我的代码中尝试了它们。我仍然卡住了。请参阅下面的代码。我需要安排主要内容并在其下面排列三个较小的内容。我还需要在底部安排页脚。

<!DOCTYPE html>
<html>
<head>
    <title> CSS Attempt </title>
     <style type="text/css">
#container {width: 960px; margin: 0 auto; background:#ffffff; border:1px solid black; height:500px;}
#header { background:#ffffff; height:60px;}
#navigation {width:960px;background:#555555;text-align:left; height:35px;}
#sidebar {width:170px; height: 300px; text-align: left; border-right: 5px solid grey; list-style: none; margin-top: 20px; margin-left: 20px; float:left;}
#content {width:750px; height:150px; background-color: #333333; margin-left:190px; float: right; margin-top:0px   }
#display {width: 220px;height:200px;background-color: #cccccc }
#center {width: 220px;height:200px; border:2px solid black }
#footer {width:960px;text-align:right; height:35px; float: right;}
 </style>
</head>


<body>
<div id="container">
        <div id="header">
        <p><img src="logo.png" alt = "Image not available"></p>
        </div>

    <div id="navigation">
    <p>Home</p>
    </div>
    <div id="sidebar">
    <p> Left Content </p>
    </div>
    <div id = "content">
    <p> Main Content </p>
    <div id = "display">
    <p> Content 1</p>
    </div>
    <div id = "center">
    <p> Central Content </p>
    </div>
    <div id = "display">
     <p> Content 2</p>
    </div>
    </div>
    <div id = "footer">
     <p> copyright </p>
    </div>

</div>  
</body>
</html>

Answer 1

借助CSS3 flex box，我们可以轻松地将盒子放在一起：

<!DOCTYPE html>
<html>
<head>
    <title> CSS Attempt </title>
     <style type="text/css">
#container {width: 960px; margin: 0 auto; background:#ffffff; border:1px solid black; height:500px;}
#header { background:#ffffff; height:60px;}
#navigation {width:960px;background:#555555;text-align:left; height:35px;}
#sidebar {width:170px; height: 300px; text-align: left; border-right: 5px solid grey; list-style: none; margin-top: 20px; margin-left: 20px; float:left;}
#content {width:750px; height:150px; background-color: #333333;margin: 20px 0 0 20px; float: right; }
#display {width: 220px;height:200px;background-color: #cccccc }
#center {width: 220px;height:200px; border:2px solid black }
#footer {width:960px;text-align:right; height:35px; float: right;}
.leftAndMain {display: flex;}
.mainInnerContents {display: flex;}
 </style>
</head>


<body>
<div id="container">
        <div id="header">
        <p><img src="logo.png" alt = "Image not available"></p>
        </div>

    <div id="navigation">
    <p>Home</p>
    </div>
<div class="leftAndMain">
    <div id="sidebar">
    <p> Left Content </p>
    </div>

    <div id = "content">
    <p> Main Content </p>
    <div class="mainInnerContents">
        <div id = "display">
        <p> Content 1</p>
        </div>
        <div id = "center">
        <p> Central Content </p>
        </div>
        <div id = "display">
         <p> Content 2</p>
        </div>
    </div>

    </div>
</div>
    <div id = "footer">
     <p> copyright </p>
    </div>

</div>  
</body>
</html>

我只添加了围绕其他div的两个div，一个包含class="leftAndMain"，另一个包含class="mainInnerContents"。

我还在<style>标记中添加了两行：

.leftAndMain {display: flex;}
.mainInnerContents {display: flex;}

以及#content中的一些细微更改。

Answer 2

您的HTML中存在错误。两个元素不能具有相同的ID，但您使用import MediaPlayer lazy var musicPlayer = MPMusicPlayerController.systemMusicPlayer() override func viewDidLoad() { super.viewDidLoad() NSNotificationCenter.defaultCenter().addObserver(self, selector: "getNowPlayingItem", name: MPMusicPlayerControllerNowPlayingItemDidChangeNotification, object: nil) musicPlayer.beginGeneratingPlaybackNotifications() } deinit { musicPlayer.endGeneratingPlaybackNotifications() NSNotificationCenter.defaultCenter().removeObserver(self) } func getNowPlayingItem() { if let nowPlaying = musicPlayer.nowPlayingItem { let title = nowPlaying[MPMediaItemPropertyTitle] as? String let artist = nowPlaying[MPMediaItemPropertyArtist] as? String let album = nowPlaying[MPMediaItemPropertyAlbumTitle] as? String let duration = nowPlaying[MPMediaItemPropertyPlaybackDuration] as? NSNumber println("Song: \(title)") println("Artist: \(artist)") println("Album: \(album)") } }两次。我现在已将第二个重命名为display，但我认为您应该考虑使用类来设置样式。

反正。在下面的代码段中，这三个块显示为表格单元格，因此它们彼此相邻。页脚被“清除”，因此它显示在左侧浮动侧栏下方。内容本身的浮动被删除，因此它只显示在侧栏旁边。

display2

/* Display the three block as cells, so they are next to each other. 
   You may specify a width for each of them. */
#display,
#center,
#display2 {
  display: table-cell;
}
#container {
  /* Removed float here. Content is just adjacent to side bar. */
  width: 960px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid black;
  height: 500px;
}
#header {
  background: #ffffff;
  height: 60px;
}
#navigation {
  width: 960px;
  background: #555555;
  text-align: left;
  height: 35px;
}
#sidebar {
  width: 170px;
  height: 300px;
  text-align: left;
  border-right: 5px solid grey;
  list-style: none;
  margin-top: 20px;
  margin-left: 20px;
  float: left;
}
#content {
  height: 150px;
  background-color: #333333;
  margin-left: 190px;
  margin-top: 0px
}
#display {
  width: 220px;
  height: 200px;
  background-color: #cccccc
}
#center {
  width: 220px;
  height: 200px;
  border: 2px solid black
}
#footer {
  width: 960px;
  text-align: right;
  height: 35px;
  /* Clear to force the footer to the bottom. Add a border to show that this is working */
  border: 1px solid red;
  clear: both;
}

如何在布局中排列<div>内联

2 个答案: