Question

我看了很多网站，但没有一个能为我工作。我可能错过了一些非常简单的事情。

#container {
  width:100%;
}

#one {
  background-color:blue;
  width:20%;
  height:50%;
}

#two {
  background-color:green;
  width:20%;
  height:50%;
}

#three {
  background-color:yellow;
  width:20%;
  height:50%;
}

#four {
  background-color:orange;
  width:20%;
  height:50%;
}

#five {
  background-color:red;
  width:20%;
  height:50%;
}

这就是我想要的样子：

它没有显示很多，我怀疑是因为高度：50％...... 在此先感谢：）

Answer 1

您只需要向容器中的每个id添加float。这是一个截断版本，无需为每个单独的ID添加相同的CSS。

int main(int argc, char** argv)
{  
    pthread_t threads[NUM_THREADS];  //Defined as 5

    clockControl clock;
    clock.counter = 0;
    pthread_mutex_init(&clock.lock, NULL);

    //Lists are initialized with variables.    
    List pendingList = initializeList();
    List readyList = initializeList();


    Arguments *args = new Arguments(&readyList, &pendingList.head->info);

    while (clock.counter < 6000){
        pthread_create(&threads[1], NULL, clockTime, (void*) &clock);

        if (clock.counter == pendingList.head->info.timeCreated){

            pthread_create(&threads[0], NULL, schedule, (void*) &args);
                          //INSPECTING args HERE HAS ACCURATE DATA

    }

        //Clean up threads
        for (int i = 0; i < 2; i++){
            pthread_join(threads[i],NULL);
        }
    }
}

或者您可以使用显示内联块

#container #one, #container #two, #container #three, #container #four, #container #five {
 float:left;
}

如果剩余任何空格，则为div居中，可以添加文本对齐中心以确保容器中的div正确居中。这仅适用于在容器上内嵌显示块的情况。

#container #one, #container #two, #container #three, #container #four, #container #five {
     display:inline-block;
    }

Answer 2

将所有div放在同一行使用

display:inline-block;

如果想在下一行显示div，使用

display:block;

默认设置为阻止;

＆＃13;

#container {
width:100%;
  
}
#one,#two,#three,#four,#five{
width:20%;
height:50%;
}
#one {
background-color:blue;
display:inline-block;
}

#two {
background-color:green;
display:inline-block;
}
#three {
background-color:yellow;
  display:inline-block;
}
#four {
background-color:orange;
}
#five {
background-color:red;
}

＆＃13;

<div id="container">
  <div id="one">
    One
   </div>
   <div id="two">
     Two
   </div>
   <div id="three">
     Three
   </div>
  <div id="four">
     four
   </div>
  <div id="five">
     five
   </div>
</div>

＆＃13;

希望有所帮助

Answer 3

我不确定这是你要问的，但也许你只需要

div{float:right;}

Answer 4

试试这个：

＆＃13;

#container {
  width: 100%;
  height: 300px;
  border: 1px solid #000;
}
#container div {
  width: 20%;
  height: 50%;
  float: left;
}
#element-1 {
  background-color: red;
}
#element-2 {
  background-color: blue;
}
#element-3 {
  background-color: pink;
}
#element-4 {
  background-color: yellow;
}
#element-5 {
  background-color: green;
}

＆＃13;

<div id="container">
  <div id="element-1"></div>
  <div id="element-2"></div>
  <div id="element-3"></div>
  <div id="element-4"></div>
  <div id="element-5"></div>
</div>

＆＃13;

我以某种方式帮助

Answer 5

我已经修改了你的代码，但这应该输出你要找的东西。

你显示内联div，并以略微负边距相对定位它们，使它们占据宽度的20％。

在您提到的评论中，您希望＆＃34;使其高度达到50％＆＃34;，因此您需要赋予身体100%高度，然后将div设置为50%高度：

＆＃13;

html,
body {
  height: 100%;
}
div {
  display: inline-block;
  width: 20%;
  height: 50%;
  position: relative;
  margin: -2px;
}
#one {
  background-color: lightblue;
}
#two {
  background-color: green;
}
#three {
  background-color: yellow;
}
#four {
  background-color: orange;
}
#five {
  background-color: red;
}

＆＃13;

<div id="one">

</div>

<div id="two">

</div>

<div id="three">

</div>

<div id="four">
</div>

<div id="five">

</div>

＆＃13;

如何将我的所有div排成一行？

5 个答案: