Question

我的网站是VivasCoaching。我一直试图消除middle_column和right_column两侧的一些空间，这样它看起来有点浓缩，但我不太清楚如何去做。我还制作了一个linkswrapper div，这样我就可以为导航所在的div添加背景颜色，但我似乎无法让它工作。这是我的代码：

html{
   height:100%;
   width:100%
}

header{
   margin-left: 20px;
   margin-bottom:5px;
}

body{

   font-family: "Comic Sans MS", sans-serif;
}

h1,h2,h3{
   color: #112C84;
}

a:link {
   color: #112C84;
   text-decoration: none;
   font-size: 120%;
}



/*-------NAV STYLING------------*/

#mainlinks li{
   float:left;
   margin-left:120px;
}



/*---------- COLUMN STYLING ----------*/

.linkswrapper{
  background-color: red;
}

.middle_column{
   float:left;
   text-align:center;
   width:70%;
   margin:2px;
   margin-left: 20px;
   padding:10px;
}

.right_column{
   float:left;
   text-align:center;
   width:10%;
   margin:5px;
}

/*---------- MOBILE --------------*/

<!DOCTYPE HTML>
<html>
 <head>
   <title>Vivas Coaching-Main</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="../style/main.css">
   <link rel="stylesheet" href="../style/normalize.css">
</head>
<body>
  <header>
    <img src="Images/logo.png" alt="logo" width="465" height="135">
  </header>
  <div class="linkswrapper">
    <nav id="mainlinks">
      <ul>
        <li><a href="index.html" title="Main">Main</a></li>
        <li><a href="aboutus" title="About Us">About Us</a></li>
        <li><a href="courses.html" title="Courses">Courses</a></li>
        <li><a href="register.html" title="Register">Register</a></li>
      </ul>
    </nav>
  </div> 
  <div class="middle_column">
    <img src="Images/SAT_summer_flyer.jpg" alt="SAT_summer_flyer" style=" width: 80%; height: auto;">
    <footer>
      <p>&copy;VivasCoaching 2016</p>
    </footer>
  </div>
  <div class="right_column">
    <h2>Contact Us</h2>
    <p>(646)316-8481/<br>(403)718-0159</p>
    <p>Please fill out the information below and we will get back to you as soon as possible!<p>
    <form method="post" action="callback.php">
      <label for="firstname">First Name: </label>
      <input name="firstname" id="firstname" type="text" />
      <label for="lastname">Last Name: </label>
      <input name="lastname" id="lastname" type="text" />
      <label for="email">Email: <span class="required"></span></label>
      <input name="email" id="email" type="text" />
      <label>*What is 2+2? (Anti-spam)</label>
      <input name="human" placeholder="Type Here">
      <label for="message"> Message:  <span class="required"></span></label>
      <textarea id="message" name="message" cols="25" rows="10" placeholder="Type your message here!"></textarea>
      <input type="submit" id="submit"/>
    </form>
  </div>
</body>
</html>

Answer 1

您需要将图片设置为100%或缩小middle_column's width

<div class="middle_column">
    <img src="Images/SAT_summer_flyer.jpg" alt="SAT_summer_flyer" style="width: 100%;height: auto;">
    <footer>
        <p>©VivasCoaching 2016</p>
    </footer>
</div>

如果middle_column的宽度为10%，则右侧列的宽度设置为70%，则应为30%; 把它变成css。

.right_column{width:30%;}

.linkswrapper设置高度/填充以显示背景颜色。

.linkswrapper{height:30px;}

注意：我认为您的页脚也应该来自middle_column。

Answer 2

背景未显示的问题是您没有为“linkswrapper”div提供任何高度。在你的CSS中给它一些高度，它会显示红色。

.linkswrapper {
    height: 40px;
}

这应该可以解决问题。

Answer 3

我为响应性添加了bootstrap，并且还清除了空白区域尝试此代码

<html>
<head>
   <title>Vivas Coaching-Main</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="../style/main.css">
   <link rel="stylesheet" href="../style/normalize.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body>

	<header class="col-md-12 col-sm-12 col-xs-12 thumbnail">
      <img src="images/logo.png" alt="logo" width="465" height="135">
	</header>

 <div class="linkswrapper col-md-12" style="text-align:center">
 	<nav id="mainlinks">
    	<ul>
        	<li><a href="index.html" title="Main">Main</a></li>
        	<li><a href="aboutus" title="About Us">About Us</a></li>
        	<li><a href="courses.html" title="Courses">Courses</a></li>
        	<li><a href="register.html" title="Register">Register</a></li>
    	</ul>
	</nav>
 </div> 

 <div class="middle_column col-md-8 thumbnail" style="border-style:none;">
	<img src="images/SAT_summer_flyer.jpg" alt="SAT_summer_flyer" style=" width: 80%; height: auto;">
	<footer>
		<p>&copy;VivasCoaching 2016</p>
    </footer>
 </div>

<div class="right_column col-md-4" style="border-style:none;">
	<h2>Contact Us</h2>
	<p>(646)316-8481/<br>(403)718-0159</p>
	<p>Please fill out the information below and we will get back to you as soon as possible!<p>

	<form method="post" action="callback.php">

      <label for="firstname">First Name: </label>
      <input name="firstname" id="firstname" type="text" class="form-control" />

      <label for="lastname">Last Name: </label>
      <input name="lastname" id="lastname" type="text" class="form-control"/>

      <label for="email">Email: <span class="required"></span></label>
      <input name="email" id="email" type="text" class="form-control"/>

      <label>*What is 2+2? (Anti-spam)</label>
      <input name="human" placeholder="Type Here" class="form-control">
      
      <label for="message"> Message:  <span class="required"></span></label>
      
      <textarea id="message" name="message" cols="25" rows="10" placeholder="Type your message here!" class="form-control"></textarea>
      <input type="submit" id="submit"/>
	</form>

</div>
</body>
</html>

Answer 4

middle_column的宽度为70％，因此您需要将右列宽度设置为30％，以便它并排显示并且看起来很完美。

.middle_column { width:70%; } .right_column { width:30%; }

我的网站及其造型问题

4 个答案: