您好我正在尝试使用bootstrap开发交替的两列网格布局，其中屏幕的左侧大小将有一个图像，然后向下反转网页直到最终用户到达页脚。
我认为使用div row col命令实现这一点并使用浮点数，它已经在第一行工作但是当它开发第二行时它没有帮助。我不知道是不是将它扔出去的浮标我总是在我的代码中经常发生的事情。有人可以帮我查一下吗？空白div也是图像。
public class ServerClass {
private ServerSocket server;
private Socket connection;
private BufferedReader input;
private BufferedWriter output;
public void startServer(){
try{
server=new ServerSocket(6789,100);
while(true){
try{
waitForConnection();
setStreams();
ServerRunning();
}catch(EOFException eofException){
showMessage("\n Server ended the connection!");
}finally{
close();
}
}
}catch(IOException ioException){
ioException.printStackTrace();
}
}
private void waitForConnection() throws IOException{
showMessage("Waiting for someone to connect... \n");
connection=server.accept();
showMessage("Now connected to "+ connection.getInetAddress().getHostName());
}
private void setStreams() throws IOException{
output = new BufferedWriter(new OutputStreamWriter(connection.getOutputStream()));
output.flush();
input= new BufferedReader(new InputStreamReader(connection.getInputStream()));
showMessage("\n Streams are now set. \n");
}
public void ServerRunning() throws IOException{
String message="SERVER HERE!";
sendMessage(message);
do{
try{
message=input.readLine();
showMessage("\n"+message);
}catch(EOFException eofException){
showMessage("\n Server ended the connection!");
}
}while(message!="EXIT");
}
private void close(){
showMessage("\n Closing connections... \n");
try{
output.close();
input.close();
connection.close();
}catch(IOException ioException){
ioException.printStackTrace();
}
}
private void showMessage(String text){
System.out.println(text);
}
private void sendMessage(String message){
try{
output.write("SERVER - "+message);
output.flush();
showMessage(message);
}catch(IOException ioException){
System.out.println("\n ERROR!");
}
}
/* CSS Document */
/* FONT FAMILY */
body{
font-family: 'Montserrat', sans-serif;
}
p {
font-family: 'Montserrat', Gotham, Helvetica Neue, Helvetica, Arial, "sans-serif";
font-weight: 200;
letter-spacing: 0.65px;
line-height: 25px;
text-align: center;
color: white;
}
.lead {
text-transform: uppercase;
}
h2 {
margin-bottom: 1em;
font-weight: 500;
letter-spacing: 1.275px;
font-size: 30px;
color: #cf6766;
}
h3 {
margin-bottom: 1em;
font-weight: 500;
letter-spacing: 0.1em;
font-size: 21px;
color: #cf6766;
}
/**************** NAVIGATION STYLING ****************/
.navbar,.navbar-default {
background-color: #30415d;
padding: 20px;
color: white;
margin: 0 auto;
}
.navbar.navbar-default li a {
color: white;
text-align: center;
margin: 0 auto;
}
.navbar.navbar-default li a:hover{
background-color: white;
color: #031424;
font-weight: bold;
}
.navbar.navbar-default li {
font-weight: 300;
letter-spacing: 0.10em;
text-transform: uppercase;
font-size: 12px;
}
.navbar-brand img {
width: 85%;
}
.navbar-brand a {
padding: 20px;
margin-top: -40px;
}
a.navbar-brand {
margin-top: -20px;
padding-right: 20px;
padding-left: 20px;
width: 85%;
}
.navbar-default {
border: none;
}
/*img.wrap {
float:right;
}*/
/**************HOME PAGE **********/
/* blockquote {
background-color: #8eaebd;
color: white;
padding: 50px;
margin-top: -50px;
width: 100%;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 36px;
margin-bottom: 50px;
font-style: italic;
font-weight: 400;
} */
.quote {
font-size: 16px;
text-align: right;
font-weight: 300;
letter-spacing: 2px;
}
.jumbotron {
background:linear-gradient(#cf6766, transparent 100%),
url(../img/DSC00154.jpg) no-repeat center;
background-size: cover;
height: 768px;
margin-top: 0px;
padding-top: 0px;
display: table;
width: 100%;
}
.jumbotron h1 {
color: white;
text-align: center;
}
#jumbotron-inner {
display: table-cell;
vertical-align: middle;
}
#jumbotron-inner p {
text-align: center;
}
.senior {
background-color: #30415d;
width: 50%;
height: 500px;
color:white;
padding: 50px;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 16px;
margin-bottom: 50px;
float: left;
}
.get-involved {
background-color: #8eaebd;
color:white;
padding: 50px;
margin-top: -50px;
width: 100%;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 16px;
margin-bottom: 50px;
float: right;
}
.get-inolved-img {
background-image: url(../img/grandmother-child.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 500px;
float: left;
}
.newMentor{
background: url(../img/grandparents.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
max-width:1000px 100%;
height:500px;
float: right;
}
.dontations {
background-color: #30415d;
color:white;
padding: 50px;
margin-top: -50px;
width: 100%;
letter-spacing: 1.5;
line-height: 1.5;
text-align: center justify;
font-size: 16px;
margin-bottom: 50px;
}
.btn-lg {
background-color: #cf6766;
}
.btn-lg {
color: white;
font-weight:200;
}
.btn-lg a:hover {
color: #8eaebd;
}
/**************about PAGE **********/
#williams {
width: 40%;
height: 50%;
margin-right: 25px;
margin-bottom: 5px;
}
#goals {
background-color: pink;
padding: 20px;
}
#youth {
background-image: url(../img/youth-2.jpg);
background-repeat:no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 1000px;
}
#mentor {
background-image: url(../img/youth-1.jpg);
width: 100%;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: black;
}
#mentor h1 {
color: rgba(0, 44, 44, 1);
}
#textarea {
display: block;
}
textarea {
display: block;
}
#community {
background-image: url(../img/youth-3.jpg);
width: 100%;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: black;
}
/***************************** FOOTER *****************************/
.copy {
color: #cf6766;
}
答案 0 :(得分：0)
我认为你正在描述一种类似棋盘式的布局。如果是这样，你可以在每个第二个div上使用偏移并清除div。
http://www.bootply.com/IMtdYhv7bs
HTML：
<div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-6"></div>
CSS：
.col-md-6 {background-color:red; height:100px; clear:both;}