CSS: 如何将 child divs 在主 div 中并排放置

Question

我有一个主 div 和主 div 有多个 child div。我无法一个接一个地定位 child div。

我希望每个 div 应该具有相同的高度和相同的背景颜色。前两个 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 fiddle link https://jsfiddle.net/tridip/t55azjpk/ 的原因。所以任何人都可以看到我得到了什么样的奇怪输出。寻找建议和纠正代码示例。谢谢

编辑

输出需要像图像这样的东西。

Answer 1

您可以使用 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的好处：

最少的代码；非常高效
centering, both vertically and horizontally, is simple and easy
响应迅速
与浮动和表格不同，它们提供有限的布局容量，因为它们从未用于构建布局，Flexbox 是一种具有广泛选项的现代 (CSS3) 技术。

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

Answer 2

分配childdiv的宽度，让每个人都能得到合适的space。这可能有效，

#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;
}

Answer 3

在您的 fiddle 中，您的 li 和 a 的样式太多了。然而，我不会在代码风格上批评你，而是展示你需要做什么来解决你的问题。如果相应地更改以下样式，您应该会得到所需的输出。

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

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

Answer 4

你的意思是这样的？

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>

Answer 5

我知道这真的很晚了，但我想我会 post 我是如何设法解决这个问题的。

<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>

所以基本上你必须给他们所有相同的 class 然后这样做是 css

.class1 {
display: inline-block;
}

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

CSS: 如何将 child divs 在主 div 中并排放置

CSS: How to position child divs in main div side by side

html

css

flexbox

这里是小代码片段

编辑