我是新手,正在尝试提高自己的技能,如您所见,我已经制作了5个框(左侧有2个框,右侧有3个框),我的问题是为什么框号“ 5”看起来不同,所以没有与数字2和4不在同一行上,它看起来好像有左边空白...但是没有,第二个问题是,当我使用“ col-xs-12”时,我希望这些盒子位于中间“中心”,第三个问题是,当我将手机更改为“横向”时,这些盒子应该在相同的地方(就像在大尺寸的“ col-lg-6 col-md-6 col-sm-6”上一样) ,第四个问题是,我有一个框“空白”,是否可以将其替换为“显示:无;或可见性:隐藏;'还能工作吗? 抱歉,英语不是我的母语。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.box{
width:100px;
height:100px;
border: solid black 1px;
}
.boxx{
width:100px;
height:100px;
border: solid white 1px;
}
* {
box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing -moz-box-sizing: border-box;
}
</style>
</head>
<body>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="boxx">
white space
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
2
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
3
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
4
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="box">
5
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分:0)
存在与DIV结构相关的问题。请检查以下更新的代码。希望这会有所帮助
#include <stdio.h>
#include <string.h>
#include <stdlib.h>
#define maxn 300
int main(){
FILE *fin, *fout;
fin = fopen("splitwords.inp", "r");
fout = fopen("splitwords.txt", "w");
char buffer[maxn], word[maxn], ch, d;
int i, pos = 0;
while((ch = fgetc(fin)) != EOF && ch != '#'){
while(ch != ' ' && ch != '\t' && ch != '\0'){
word[pos] = ch;
pos++;
if((d = fgetc(fin)) == ' ' || d == '\t' || d == '\0'){
word[pos] = '\0';
fputs(word, fout);
printf("%s", word);
pos = 0;
}
}
if(ch == ' ' || ch == '\t' || ch == '\0') continue;
}
fclose(fin);
fclose(fout);
}
.box{
width:100px;
height:100px;
border: solid black 1px;
}
.boxx{
width:100px;
height:100px;
border: solid white 1px;
}
* {
box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing -moz-box-sizing: border-box;
}
答案 1 :(得分:0)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.box{
width:100px;
height:100px;
border: solid black 1px;
margin-left: auto;
margin-right: auto;
}
.boxx{
width:100px;
height:100px;
border: solid white 1px;
margin-left: auto;
margin-right: auto;
}
* {
box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing -moz-box-sizing: border-box;
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-6">
<div class="boxx">
white space
</div>
</div>
<div class="col-sm-6">
<div class="box">
2
</div>
</div>
<div class="col-sm-6">
<div class="box">
3
</div>
</div>
<div class="col-sm-6">
<div class="box">
4
</div>
</div>
<div class="col-sm-6 col-sm-offset-6">
<div class="box">
5
</div>
</div>
</div>
</body>
</html>
您好,您遇到的问题归因于div
结构和不正确的grid
布局。我已经正确构造了它。让我知道这是您所需要的还是需要进一步的更改/说明。