Вопрос:

Border is not showing correctly when i made a listing with div

jquery html css

36 просмотра

2 ответа

91 Репутация автора

I have data listing section made with div. Each row in my listing contains

<div class="itemBox" style="width:25px;">4</div>
<div class="itemBox" style="width:60px; height: auto;"> CPT4</div>
<div class="itemBox" style="width:60px; height: auto;">43633</div>
<div class="itemBox" style="width:60px; height: auto;"></div>

Css for itemBox is

    .itemBox {
    border-right: 1px dotted #ccc;
    min-height: 15px;
    padding: 5px 0;
   }

When one itemBox div have larger text content the border in that row won't show correctly .Is there any way to fix this issue?.

enter image description here

Автор: user1752065 Источник Размещён: 28.03.2017 05:08

Ответы (2)


2 плюса

10788 Репутация автора

Use display: table and display: table-cell. Or alternatively, if you only need to support newer browsers, use flexbox.

https://jsbin.com/qafomuzako/edit?html,css,output

<div class="table">
    <div class="cell">Short</div>
    <div class="cell">Short</div>
    <div class="cell">Short</div>
    <div class="cell">Longer input that spans multiple lines</div>
</div>

.table {
  display: table;
}

.cell {
  border: 1px solid #ddd;
  border-right: none;
  display: table-cell;
  width: 100px;
}

.cell::last-child {
  border-right: 1px solid #ddd;
}
Автор: fubar Размещён: 28.03.2017 05:27

0 плюса

6598 Репутация автора

The reason why you border is not being applied properly is due to the fact that you are floating the divs with class .itemBox is in the last column. Hence it does not adjust to the previous divs that that are in single ul tag. In fact the divs that made the last column adjust to their own height instead of their "row"'s height

fiddle here that shows the issue

  • Add a word-wrap property to your itemBox class
  • Take out those divs that make the last column and include it in your span element your span element that is in your li tags. Do not float these divs

    fiddle here for a solution

  • Автор: repzero Размещён: 28.03.2017 06:10
    Вопросы из категории :
    32x32