Question

我试图浮动一排4张图片。但是，他们并没有浮动。我将附上我的代码和本地托管的网站截图。我已经尝试将float放在CSS的其他部分，例如#sidebar{float:left;}中。我不知道为什么它不会漂浮。我也尝试了.left{float:left}，但这只会使侧边栏变小。我对此非常困惑。

＆＃13;

/* ----- Fonts CSS ----- */

body {
  font-family: 'Comfortaa', cursive, sans-serif;
  margin: 0;
  padding: 0;
}


/* ----- End Fonts CSS ----- */

.indexBody {
  width: 100%;
  background-image: url("city.jpg");
  color: #fff;
}

#textLogo {
  text-align: center;
  font-size: 46px;
}


/*---- Index Page ----*/

.serviceTitle {
  float: left;
  width: 49%;
  text-align: center;
  margin-bottom: 0;
}

.serviceImage {
  float: left;
  margin-left: 4.5%;
  margin-bottom: 9%;
  margin-top: 3%;
  width: 600px;
}

a .serviceImage:hover {
  background-image: url("IMG_3134.jpg");
}

.clearfix {
  clear: both;
}

footer {
  color: #fff;
  font-size: 24px;
  text-align: center;
}


/*---- Photograohy Portfolio Index Page ----*/

nav ul {
  width: 75%;
}

nav ul li {
  list-style-type: none;
  font-size: 34px;
  color: #fff;
  text-align: center;
  padding: 15px;
  border-bottom: 2px solid black;
}

nav ul li a {
  text-decoration: none;
  color: black;
}

nav ul li a:hover {
  color: blue;
}

.col1 {
  float: left;
  width: 35%;
}

.photoBody {
  margin: 0;
  background-color: #fff;
}

#sidebar {
  width: 20%;
}

.navigation {
  background-color: #fff;
  width: 100%;
  height: 100%;
}

#photogLogo {
  text-align: center;
  font-size: 46px;
  color: black;
  margin-top: 0;
}

.main1 {
  width: 70%;
  clear: both;
}

.row1 {
  float: left;
  width: 20%;
  padding: 3px;
  margin: 1%;
  border: 2px solid black;
}


/*Test*/

.right {
  float: right;
}

＆＃13;

<body class="photoBody">
  <div class="left">
    <div id="sidebar">
      <div class="navigation">
        <h1 id="photogLogo">Text Logo</h1>
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
  <div class="right">
    <div class="main1">
      <img class="row1" src="IMG_4085.jpg" alt="Coastline" />
      <img class="row1" src="IMG_4085.jpg" alt="Coastline" />
      <img class="row1" src="IMG_4085.jpg" alt="Coastline" />
      <img class="row1" src="IMG_4085.jpg" alt="Coastline" />
    </div>
  </div>
</body>

＆＃13;

Answer 1

如果我理解你想要什么，这是一种方法：

 .main1{
    width: 35%;
    clear: both;
}

.row1{
    display:block;
    left:0;
    float:left;
    width: 100%; 
    padding: 3px;
    margin: 1%;
    border: 2px solid black;
}

fiddle here

Answer 2

这是你需要的吗？

/* ----- Fonts CSS ----- */

body {
  font-family: 'Comfortaa', cursive, sans-serif;
  margin: 0;
  padding: 0;
}


/* ----- End Fonts CSS ----- */

.indexBody {
  width: 100%;
  background-image: url("city.jpg");
  color: #fff;
}

#textLogo {
  text-align: center;
  font-size: 46px;
}


/*---- Index Page ----*/

.serviceTitle {
  float: left;
  width: 49%;
  text-align: center;
  margin-bottom: 0;
}

.serviceImage {
  float: left;
  margin-left: 4.5%;
  margin-bottom: 9%;
  margin-top: 3%;
  width: 600px;
}

a .serviceImage:hover {
  background-image: url("IMG_3134.jpg");
}

.clearfix {
  clear: both;
}

footer {
  color: #fff;
  font-size: 24px;
  text-align: center;
}


/*---- Photograohy Portfolio Index Page ----*/

nav ul {
  width: 75%;
}

nav ul li {
  list-style-type: none;
  font-size: 34px;
  color: #fff;
  text-align: center;
  padding: 15px;
  border-bottom: 2px solid black;
}

nav ul li a {
  text-decoration: none;
  color: black;
}

nav ul li a:hover {
  color: blue;
}

.col1 {
  float: left;
  width: 35%;
}

.photoBody {
  margin: 0;
  background-color: #fff;
}

#sidebar {
  width: 20%;
}

.navigation {
  background-color: #fff;
  width: 100%;
  height: 100%;
}

#photogLogo {
  text-align: center;
  font-size: 46px;
  color: black;
  margin-top: 0;
}

.main1 {
  width: 70%;
  text-align: left;
}

.row1 {
  float: left;
  width: 20%;
  padding: 3px;
  margin: 1%;
  border: 2px solid black;
}


/*Test*/

.right {
  float: right;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Sample Project</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<div class="photoBody">
  <div id="sidebar">
    <div class="navigation">
      <h1 id="photogLogo">Text Logo</h1>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>

  <div class="main1">
    <img class="row1" src="http://placehold.it/100" alt="Coastline" />
    <img class="row1" src="http://placehold.it/100" alt="Coastline" />
    <img class="row1" src="http://placehold.it/100" alt="Coastline" />
    <img class="row1" src="http://placehold.it/100" alt="Coastline" />
  </div>

</div>

图像没有浮动

2 个答案: