alignment of div and summarize text

Asked

Viewed 78 times

1

  • 1 I need to place everything inside the horizontally aligned 'container-head' div.
  • 2 The text of div 'c-txt' has to be summarized with ...
  • 3 The div 'c-Bt' button has to be at least 100px long.

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

  • Take a look at this answer and you might help: http://answall.com/questions/153211/howwe can make sure that we are determined by classe%C3%A7a-ap%C3%B3s-reach-a-limit/153214#153214

  • did not help me, I need to align these div, the summary is already being done.

2 answers

1


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

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

1

Kind of:

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

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.