All geek questions in one place

The maximum number of items located on the left?

I am trying to create a simple booking solution that will appear as a table, but the colored rectangles float for the time they are booked. The actual database, data entry screens are fully integrated into my solution, I just need to display the data.

The first thing I need to do is draw a grid with the resource name + 24 hours. After much research, I decided to use floating divs in the list, since I can use the absolute position to place the colored rectangle when the resource is reserved.

I'm trying to make the first line, the rest should repeat this. I have the following code, is there a way to make it display all the "li" in the same horizontal line? At the moment, it seems to end at 8 pm - 11 pm on the second line, regardless of how much space is available on the horizontal line. Is there a limit on the number of divs that I can put on the left of a line? Is there a way to ensure that if the window size becomes smaller, the divs do not wrap themselves on the second page, they remain stiff as a single line.

I would like to use tables for this, but studies show that overlapping colored divs with an absolute position with a different z-index will work much better on the divs layer than on the table.

Many thanks

#container {
  overflow: auto;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
  display: inline;
}
.resource-name {
  border: 1px solid #d9d9d9;
  width: 120px;
  height: 25px;
  float: left;
}
.time-col {
  border: 1px solid #d9d9d9;
  width: 30px;
  height: 25px;
  float: left;
}
<div id="container">
  <ul>
    <li>
      <div class="resource-name">Room A1</div>
      <div class="time-row">
        <div class="time-col">12a</div>
        <div class="time-col">1a</div>
        <div class="time-col">2a</div>
        <div class="time-col">3a</div>
        <div class="time-col">4a</div>
        <div class="time-col">5a</div>
        <div class="time-col">6a</div>
        <div class="time-col">7a</div>
        <div class="time-col">8a</div>
        <div class="time-col">9a</div>
        <div class="time-col">10a</div>
        <div class="time-col">11a</div>
        <div class="time-col">12p</div>
        <div class="time-col">1p</div>
        <div class="time-col">2p</div>
        <div class="time-col">3p</div>
        <div class="time-col">4p</div>
        <div class="time-col">5p</div>
        <div class="time-col">6p</div>
        <div class="time-col">7p</div>
        <div class="time-col">8p</div>
        <div class="time-col">9p</div>
        <div class="time-col">10p</div>
        <div class="time-col">11p</div>
      </div>
    </li>
  </ul>
</div>
Run codeHide result
+4
3

divs, . , , - inline-block white-space: nowrap; :

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>

<style>

#container {
 overflow:auto;
}

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}

li {
  white-space: nowrap;
}

.resource-name { 
 border: 1px solid #d9d9d9;
 width: 120px;
 height:25px;
 display: inline-block;
}

.time-row {
 display: inline-block;
}
  
.time-col {
 border: 1px solid #d9d9d9;
 width: 30px;
 height:25px;
 display: inline-block;
}

</style>


</head>

<body>

<div id="container">
<ul>
  <li>
    <div class="resource-name">Room A1</div>
    <div class="time-row">
        <div class="time-col">12a</div>
        <div class="time-col">1a</div>
        <div class="time-col">2a</div>
        <div class="time-col">3a</div>
        <div class="time-col">4a</div>
        <div class="time-col">5a</div>
        <div class="time-col">6a</div>
        <div class="time-col">7a</div>
        <div class="time-col">8a</div>
        <div class="time-col">9a</div>
        <div class="time-col">10a</div>
        <div class="time-col">11a</div>
        <div class="time-col">12p</div>
        <div class="time-col">1p</div>
        <div class="time-col">2p</div>
        <div class="time-col">3p</div>
        <div class="time-col">4p</div>
        <div class="time-col">5p</div>
        <div class="time-col">6p</div>
        <div class="time-col">7p</div>
        <div class="time-col">8p</div>
        <div class="time-col">9p</div>
        <div class="time-col">10p</div>
        <div class="time-col">11p</div>
    </div>
  </li>
</ul>
</div>

</body>
</html>
Hide result
+3

width:100% li. , , float .time-col

#container {
  overflow: auto;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  display: inline;
  width:100%
}
.resource-name {
  border: 1px solid #d9d9d9;
  width: 120px;
  height: 25px;
  float: left;
}
.time-col {
  border: 1px solid #d9d9d9;
  width: 30px;
  height: 25px;
  float: left;
}
<div id="container">
  <ul>
    <li>
      <div class="resource-name">Room A1</div>
      <div class="time-row">
        <div class="time-col">12a</div>
        <div class="time-col">1a</div>
        <div class="time-col">2a</div>
        <div class="time-col">3a</div>
        <div class="time-col">4a</div>
        <div class="time-col">5a</div>
        <div class="time-col">6a</div>
        <div class="time-col">7a</div>
        <div class="time-col">8a</div>
        <div class="time-col">9a</div>
        <div class="time-col">10a</div>
        <div class="time-col">11a</div>
        <div class="time-col">12p</div>
        <div class="time-col">1p</div>
        <div class="time-col">2p</div>
        <div class="time-col">3p</div>
        <div class="time-col">4p</div>
        <div class="time-col">5p</div>
        <div class="time-col">6p</div>
        <div class="time-col">7p</div>
        <div class="time-col">8p</div>
        <div class="time-col">9p</div>
        <div class="time-col">10p</div>
        <div class="time-col">11p</div>
      </div>
    </li>
  </ul>
</div>
Hide result

, display:table/-cell

#container {
  overflow: auto;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  display:table;
  width:100%;
  table-layout:fixed;
}
.resource-name {
  border: 1px solid #d9d9d9;
  width: 120px;
  height: 25px;
  display:table-cell;
}
.time-col {
  border: 1px solid #d9d9d9;
  width: 30px;
  height: 25px;
  display:table-cell;
}
<div id="container">
  <ul>
    <li>
      <div class="resource-name">Room A1</div>
      <div class="time-row">
        <div class="time-col">12a</div>
        <div class="time-col">1a</div>
        <div class="time-col">2a</div>
        <div class="time-col">3a</div>
        <div class="time-col">4a</div>
        <div class="time-col">5a</div>
        <div class="time-col">6a</div>
        <div class="time-col">7a</div>
        <div class="time-col">8a</div>
        <div class="time-col">9a</div>
        <div class="time-col">10a</div>
        <div class="time-col">11a</div>
        <div class="time-col">12p</div>
        <div class="time-col">1p</div>
        <div class="time-col">2p</div>
        <div class="time-col">3p</div>
        <div class="time-col">4p</div>
        <div class="time-col">5p</div>
        <div class="time-col">6p</div>
        <div class="time-col">7p</div>
        <div class="time-col">8p</div>
        <div class="time-col">9p</div>
        <div class="time-col">10p</div>
        <div class="time-col">11p</div>
      </div>
    </li>
  </ul>
</div>
Hide result
+1

Flex if you don't like older browsers. Easy to use, always on one line (default), many options. I did not touch your HTML, but it can be short.

ul {
  margin: 0;
  padding: 0;
}
li {
  display: flex;
}
.resource-name {
  border: 1px solid #d9d9d9;
  flex: 0 0 120px;
  height: 25px;
}
.time-row {
  flex: 1 0 auto;
  display: flex;
}
.time-col {
  border: 1px solid #d9d9d9;
  flex: 0 0 30px;
  height: 25px;
}
<div id="container">
  <ul>
    <li>
      <div class="resource-name">Room A1</div>
      <div class="time-row">
        <div class="time-col">12a</div>
        <div class="time-col">1a</div>
        <div class="time-col">2a</div>
        <div class="time-col">3a</div>
        <div class="time-col">4a</div>
        <div class="time-col">5a</div>
        <div class="time-col">6a</div>
        <div class="time-col">7a</div>
        <div class="time-col">8a</div>
        <div class="time-col">9a</div>
        <div class="time-col">10a</div>
        <div class="time-col">11a</div>
        <div class="time-col">12p</div>
        <div class="time-col">1p</div>
        <div class="time-col">2p</div>
        <div class="time-col">3p</div>
        <div class="time-col">4p</div>
        <div class="time-col">5p</div>
        <div class="time-col">6p</div>
        <div class="time-col">7p</div>
        <div class="time-col">8p</div>
        <div class="time-col">9p</div>
        <div class="time-col">10p</div>
        <div class="time-col">11p</div>
      </div>
    </li>
  </ul>
</div>
Run codeHide result
+1
source

Source: https://habr.com/ru/post/1617533/

More articles:


All Articles