CSS：如何将主div中的子div放在一起

时间：2015-12-27 17:09:30

标签： html css css3 flexbox

我有一个主div和主div有多个子div。我无法一个接一个地定位儿童div。

我希望每个div应该具有相同的高度＆amp;相同的背面颜色。前两个div应该有float:left，最后一个应该有float:right。我这样做但仍然没有得到正确的输出。

这里是小代码片段

<div id="content">
    <div id="recinfo">Records 1/5 of 50</div>
    <div id='pager'>
        <ul class="paginate pag5 clearfix">
            <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">prev</a></li>
            <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">next</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">1</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">2</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">3</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">4</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">5</a></li>
            <li class="current">6</li>
            <li class="navpage"><a href="">next</a></li>
            <li class="navpage"><a href="">last</a></li>
        </ul>
    </div>

    <div id='loader'>Loading.....<img src="images/busy.gif" /></div>
</div>

我的css代码很大，这就是为什么我不在这里粘贴它而不是在这里给我的js小提琴链接https://jsfiddle.net/tridip/t55azjpk/。所以任何人都可以看到我得到了什么样的奇怪输出。寻找建议和纠正代码示例。感谢

修改

输出会像图像一样。 enter image description here

5 个答案:

答案 0 :(得分：3)

您可以使用CSS flexbox实现此布局。

这是一般解决方案：

<强> HTML 

<div id="content">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

<强> CSS 

#content { display: flex; }
#content > div:nth-child(2) { flex: 1; }

DEMO

flexbox的好处：

  1. 最小代码;效率很高
  2. centering, both vertically and horizontally, is simple and easy
  3. equal height columns are simple and easy
  4. multiple options for aligning flex elements
  5. 它的响应
  6. 与花车和桌子不同，浮动和桌面提供有限的布局容量，因为它们从未用于建筑布局，因此flexbox是一种现代（CSS3）技术，具有广泛的选项。

    7. 要了解有关flexbox的更多信息，请访问：

答案 1 :(得分：1)

我知道这真的很晚，但是我想我会发布我如何解决这个问题的

<div>
<h1 class="class1">Example text</h1>
<h1 class="class1">Example text</h1>
<h1 class="class1">Example text</h1>
<h1 class="class1">Example text</h1>
</div>

所以从本质上讲，您必须给他们全部相同的类，然后才是css 

.class1 {
display: inline-block;
}

希望这对偶然发现此问题的人有所帮助。

答案 2 :(得分：0)

分配子div的宽度，以便每个人都可以获得适当的空间。 这可能有用，

#content > div{width:30% !important; 
/* If you have three divs and you equally distribute their width */
float:left;
}
#content:nth-child(1){
width:20%;
float:left;
}
#content:nth-child(2){
width:60%;
float:left;
}
#content:nth-child(3){
width:20%;
float:left;
}

答案 3 :(得分：0)

在你的小提琴中，你和李的风格太多了。但是，我不会批评你的代码风格，而是展示你需要做些什么来解决你的问题。如果相应地更改以下样式，则应该具有所需的输出。 

#loader
{
float:left;
width:20%;
}
#pager { 
 float: left;
 width: 60%;
}
#recinfo
{
  float:left;
  width:20%;
}

.paginate {
 display: block;
 font-size: 1.2em;
 width: 100%;
}

答案 4 :(得分：0)

你的意思是这样吗？

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
html {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
q,
blockquote {
  quotes: none;
}
q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
  content: none;
}
a img {
  border: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
*,
*:after,
*:before {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
#content {
  background: #fff none repeat scroll 0 0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 62.5%;
  line-height: 1;
}
#content > div {
  height: 50px;
}
#loader {
  float: right;
  width: 150px;
}
#recinfo {
  float: left;
  width: 150px;
}
#pager {
  text-align: center;

}
ul.paginate {
  display: inline-block;
  font-size: 1.2em;
  background: #373943 none repeat scroll 0 0;
  border-radius: 3px;
  font-size: 1.4em;
  padding: 9px 8px;
}
ul.paginate > li {
  font-weight: bold;
  display: inline-block;
}
ul.paginate > li > a {
  margin-right: 6px;
}
<div id="content">
  <div id="recinfo">Records 1/5 of 50</div>
  <div id="loader">Loading.....
    <img src="images/busy.gif">
  </div>
  <div id="pager">
    <ul class="paginate pag5 clearfix">
      <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">prev</a>
      </li>
      <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">next</a>
      </li>
      <li><a href="http://localhost:13562/SamplePager/Index">1</a>
      </li>
      <li><a href="http://localhost:13562/SamplePager/Index">2</a>
      </li>
      <li><a href="http://localhost:13562/SamplePager/Index">3</a>
      </li>
      <li><a href="http://localhost:13562/SamplePager/Index">4</a>
      </li>
      <li><a href="http://localhost:13562/SamplePager/Index">5</a>
      </li>
      <li class="current">6</li>
      <li class="navpage"><a href="">next</a>
      </li>
      <li class="navpage"><a href="">last</a>
      </li>
    </ul>
  </div>

  
</div>

相关问题
最新问题