div alignment and summarize text

Question

div alignment and summarize text

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

1 I need to put everything inside the container-head div aligned horizontally.
2 The text of the 'c-txt' div has to be summed up with ...
3 The 'c-bt' div button must be at least 100px.

Can anyone help me? follow the code.

.container {
  left: 0;
  right: 0;
  margin: 10px auto 10px auto;
  width: 95%;
  border-radius: 4px;
  background: #FFFFFF;
}
.container table {
  width: 100%;
  margin: 0 auto;
}
.container .linha {
  border-top: 1px solid #D7D7D7;
}
.container-head {
  width: 100%;
  color: #FFFFFF;
  border-radius: 4px 4px 0 0;
  height: 65px;
  background: #000;
  line-height: 65px;
}
.container-head .c-ico {
  float: left;
  width: 10%;
}
.container-head .c-txt {
  float: left;
  width: 70%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}
.container-head .c-bt {
  width: 20%;
  min-width: 120px;
  float: right;
}
.container-head .c-bt button {
  border: 0;
  width: 100px;
  height: 42px;
  cursor: pointer;
  border-radius: 4px;
  color: #FFFFFF;
}

<!-- Material Icons (Google) -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">

  <!-- Container Head -->
  <div class="container-head">
    <div class="c-ico"><i class="material-icons ">grade</i>
    </div>
    <div class="c-txt">TÍTULO GRANDE TEM QUE FICAR RESUMIDO POR ...</div>
    <div class="c-bt">
      <button type='submit'>FINALIZAR</button>
    </div>
  </div>
</div>

css

asked by anonymous 30.12.2016 / 17:17

2 answers

1

Type like this:

.container {
  left: 0;
  right: 0;
  margin: 10px auto 10px auto;
  width: 95%;
  border-radius: 4px;
  background: #FFFFFF;
}
.container table {
  width: 100%;
  margin: 0 auto;
}
.container .linha {
  border-top: 1px solid #D7D7D7;
}
.container-head {
  width: 100%;
  color: #FFFFFF;
  border-radius: 4px 4px 0 0;
  height: 65px;
  background: #000;
  line-height: 65px;
}
.container-head .c-ico i{
  float: left;
  line-height: 65px;
  margin-right:5px;
  margin-left:5px;
}
.container-head .c-txt {
  float: left;
  width: 70%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}
.container-head .c-bt {
  width: 20%;
  min-width: 120px;
  float: right;
}
.container-head .c-bt button {
  border: 0;
  width: 100px;
  height: 42px;
  cursor: pointer;
  border-radius: 4px;
  color: #FFFFFF;
}

<!-- Material Icons (Google) -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">

  <!-- Container Head -->
  <div class="container-head">
    <div class="c-ico"><i class="material-icons ">grade</i>
    </div>
    <div class="c-txt">TÍTULO GRANDE TEM QUE FICAR RESUMIDO POR ...         </div>
    <div class="c-bt">
      <button type='submit'>FINALIZAR</button>
    </div>
  </div>
</div>

30.12.2016 / 18:52

Get totals by date range, relating to additional table [closed] Limit the number of forms to be printed per page

score 1 · Accepted Answer

I used the flex property to align the content, see how it was ...

.container {
  margin: 10px auto 10px auto;
  width: 100%;
  border-radius: 4px;
  background: #FFFFFF;
}
.container-head {
  color: #FFFFFF;
  border-radius: 4px 4px 0 0;
  height: 65px;
  background: #000;
  line-height: 65px;
  display: flex;
  justify-content: center;
}
.container-head * {
  margin: 0 5px;
}
.container-head .c-txt {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}
.container-head .c-txt::after {
  content: '...';
}
.container-head .c-bt button {
  border: 0;
  height: 42px;
  min-width: 100px;
  cursor: pointer;
  border-radius: 4px;
  color: #FFFFFF;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<div class="container">
  <!-- Container Head -->
  <div class="container-head">
    <div class="c-ico"><i class="material-icons ">grade</i>
    </div>
    <div class="c-txt"
      <span class="text">TÍTULO GRANDE TEM QUE FICAR RESUMIDO POR</span>
    </div>
    <div class="c-bt">
      <button type='submit'>FINALIZAR</button>
    </div>
  </div>
</div>