1. casa
  2. Domanda e risposta
  3. Come rendere la linea superiore più corta della linea di fondo (all'interno del div)

Come rendere la linea superiore più corta della linea di fondo (all'interno del div)

2015-01-28 15 views
5

Ho una lista non ordinata che contiene 3 voci di lista (rappresentate nel mio esempio come 3 caselle verdi). Ogni scatola ha un'immagine e 3 div (titolo, posizione, prezzo). Mi preoccupo solo del div del titolo di ogni box.Come rendere la linea superiore più corta della linea di fondo (all'interno del div)

Se il titolo è abbastanza lungo da produrre 2 righe, voglio che la riga superiore sia sempre più corta della riga inferiore. Il mio sito demo visto here mostra le caselle 1 & 2 con l'impostazione sbagliata, e la casella # 3 mostra l'impostazione corretta.

Ho problemi ... questo potrebbe richiedere a js di determinare la lunghezza della linea e quindi impostare la linea di fondo più lunga. Probabilmente la risoluzione dello schermo avrà un ruolo, ma non posso rendere le linee coerenti su diverse dimensioni dello schermo?

Ecco una delle voci di elenco, mi interessa il "titlebox" div:

<li class="list__item"> 
      <figure class="list__item__inner"> 

    <p class="vignette" style="background-image:url(http://www.ht-real-estate.com/template/ht2014/images/landscape/05.jpg)"></p> 
    <div class="titlebox">This line is longer than this line</div> 
    <div class="locationbox">Location</div> 
    <div class="pricebox">Price</div> 

</li>

Ogni aiuto è grande, grazie !!

screenshot allegato troppo: Screenshot

fonte

2015-01-28 Nova

+1

Scatta uno screenshot e includilo nella tua domanda. Il collegamento di un esempio da un sito esterno è disapprovato perché se il collegamento si interrompe, la domanda di solito diventa inutile. –

+0

Ha senso, ho aggiunto uno screenshot. – Nova

+0

è quasi certo che non puoi controllarlo con un singolo div perché si spezzerà su una parola o cercherà di renderlo a livello. – phillip

risposta

1

Ecco una soluzione JS che potrebbe funzionare per voi in maggior parte dei casi (lo dico maggior parte dei casi, perché i caratteri di testo possono avere larghezze variabili). Fondamentalmente divide le frasi in 2 righe con un tag <br> inserito dinamicamente. Commenti nel codice:

$(".titlebox").each(function(){ 
    var len = $(this).text().length, 
     words = $(this).text().split(" "), 
     line1 = [], 
     line2 = [], 
     html = ""; 

    // iterate through each word in the title 
    $.each(words, function(i,word){ 
    // if line 1's current length plus the length of this word 
    // is less than half the total characters, add word to line 1 
    // else add to line 2 
    // (check index of word to maintain order) 
    if((line1.join(" ")+" "+word).length < (len/2) && (i == line1.length)){ 
     line1.push(word); 
    } else { 
     line2.push(word); 
    } 
    }); 

    // concatenate the results with a '<br>' separating the lines 
    html = line1.join(" ")+"<br>"+line2.join(" "); 

    // replace the .titlebox content with this new html string 
    $(this).html(html); 
});

fonte

2015-01-28 21:08:54 SteamDev

+0

Wow, grazie. Ho aggiunto il codice al mio sito, ma non sembra funzionare. Puoi controllare per favore? view-source: http: //testsite24.netai.net/public/public.html. Lo script è nel tag – Nova

+0

@Nova dovresti inserire il codice sopra in un '$ (documento) .ready (funzione() {...});' o '$ (funzione() {...}) ; '(in breve). Fondamentale per quando lo script viene inserito prima degli elementi DOM a cui fa riferimento. – SteamDev

+0

Eccellente, funziona! Grazie per l'aiuto. – Nova

0 

html 
 
{ 
 
     width: 100%; 
 
     height: 40%; 
 
} 
 
body 
 
{ 
 
\t background-color: #FFFFFF; 
 
\t overflow-y: scroll; 
 
     overflow-x: hidden; 
 
} 
 

 
/* JavaScript disabled */ 
 

 
html.no-js .list__item 
 
{ 
 
     width: 100%; 
 
\t float: none; 
 
} 
 
html.no-js .list__item img 
 
{ 
 
     max-width: 9.375rem; /* 150 */ 
 
     float: right; 
 
     margin-left: 1.25rem; /* 20 */ 
 
} 
 

 
@supports (display: -webkit-flex) or (display: -ms-flex) or (display: flex) 
 
{ 
 
     html.no-js .list__item 
 
     { 
 
       width: 25%; 
 
       float: left; 
 
     } 
 
     html.no-js .list__item img 
 
     { 
 
       max-width: none; 
 
       float: none; 
 
       margin-left: 0; 
 
     } 
 
} 
 

 
nav { 
 
\t border: 1px solid #ccc; 
 
\t border-right: none; 
 
\t border-left-color: #006600; 
 
\t width: 100%; 
 
\t margin-bottom: 20px; 
 
\t background-color: #006600; 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t font-size: 100%; 
 
\t color: #030303; 
 
} 
 

 
nav ul { 
 
\t display: flex; 
 
    flex-direction: row; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
nav ul li { 
 
    list-style: none; 
 
    text-align: center; 
 
    border-left: 1px solid #fff; 
 
    border-right: 1px solid #ccc; 
 
} 
 

 
nav ul li:first-child { 
 
    border-left: none; 
 
} 
 

 
nav ul li:hover { 
 
    background: #9cb369; 
 
} 
 

 
nav ul li a { 
 
\t display: block; 
 
\t text-decoration: none; 
 
\t color: #FFFFFF; 
 
\t padding: 10px 0; 
 
} 
 

 

 
nav { 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 

 

 
ul li { 
 
\t flex-grow: 1; 
 
} 
 

 
.x { 
 
    display: none; 
 
} 
 

 
.p { 
 
    text-align: center; 
 
    font-size: 14px; 
 
    margin-top: 80px; 
 
} 
 

 
.d { 
 
    color: #ccc; 
 
} 
 

 

 
    nav ul li { 
 
    display: block; 
 
    border-bottom: 1px solid #ccc; 
 
    } 
 

 

 
.whywelove img{ 
 
\t margin-top: 1%; 
 
\t height: auto; 
 
\t width: 50%; 
 
} 
 

 

 
.font3 { 
 
\t margin-top: 2%; 
 
\t color: #030; 
 
\t font-family: "Times New Roman", Times; 
 
\t font-size: 8vh; 
 
} 
 

 
.font4 { 
 
\t font-size: 3.5vh; 
 
\t font-weight: bolder; 
 
\t font-family: "Times New Roman", Times; 
 
\t color: #002B00; 
 
\t line-height:25px; 
 
\t margin-top: -0.5%; 
 
\t margin-bottom: 2% 
 
} 
 

 

 
\t .vignette { 
 
\t  width: 90%; 
 
\t  margin-top:5%; 
 
     margin-left:auto; 
 
     margin-right:auto; 
 
\t  box-shadow: 15px 15px 40px #defeec inset,-15px -15px 40px #defeec inset; 
 
\t  height: 240px; 
 
\t  background-size: cover; 
 
\t  background-repeat: no-repeat; 
 
\t } 
 

 
.vignette2 { 
 
\t  width: 800px; 
 
\t  margin-top:3%; 
 
     margin-left:auto; 
 
     margin-right:auto; 
 
\t  box-shadow: 75px 75px 50px #defeec inset,-75px -75px 50px #FFFF inset; 
 
\t  height: 600px; 
 
\t  background-size: cover; 
 
\t  background-repeat: no-repeat; 
 
\t } 
 

 

 
\t \t \t \t \t .container 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t width: 100%; 
 
\t \t \t \t \t \t max-width: 76rem; 
 
\t \t \t \t \t \t font-size: 0.875rem; /* 14 */ 
 
\t \t \t \t \t \t line-height: 1.375rem; /* 22 */ 
 
\t \t \t \t \t \t margin: 0 auto; 
 
\t \t \t \t \t \t padding: 0.625rem; /* 10 */ 
 

 
\t \t \t \t \t } 
 
\t \t \t \t \t \t .container, 
 
\t \t \t \t \t \t .container a 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t color: #cfd7db; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t .container a:hover 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t color: #fff; 
 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t h1 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t font-size: 2.5rem; /* 40 */ 
 
\t \t \t \t \t \t \t font-weight: 300; 
 
\t \t \t \t \t \t \t line-height: 2.875rem; /* 46 */ 
 
\t \t \t \t \t \t \t text-align: center; 
 
\t \t \t \t \t \t \t margin-bottom: 2.5rem; /* 40 */ 
 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t a.divLink { 
 
\t \t \t \t \t \t text-decoration: none; 
 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t .list 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t width: 100%; 
 
\t \t \t \t \t \t \t overflow: hidden; 
 

 
\t \t \t \t \t \t \t display: -webkit-flex; 
 
\t \t \t \t \t \t \t display: -ms-flexbox; 
 
\t \t \t \t \t \t \t display: flex; 
 

 
\t \t \t \t \t \t \t -webkit-flex-wrap: wrap; 
 
\t \t \t \t \t \t \t -ms-flex-wrap: wrap; 
 
\t \t \t \t \t \t \t flex-wrap: wrap; 
 
\t \t \t \t \t \t } 
 
\t .list__item 
 
\t \t \t \t \t \t \t { 
 
\t \t width: 32%; 
 
\t \t float: left; /* 10 */ 
 
\t \t display: -webkit-flex; 
 
\t \t display: -ms-flexbox; 
 
\t \t display: flex; 
 
\t \t padding-top: 0.625em; 
 
\t \t padding-bottom: 0.825em; 
 
\t \t margin-left:1%; 
 
\t \t margin-right:0%; 
 
\t  position:relative; 
 
\t  line-height:40px; 
 
\t \t \t \t \t \t \t } 
 

 

 
\t .list__item .caption \t { 
 
\t  position: absolute; 
 
\t  width: 20%; 
 
\t  height: 10%; 
 
\t  top: 30%; 
 
\t  left: 32%; 
 
\t  font-size: 3.3em; 
 
\t  font-weight:bold; 
 
\t  color: red; 
 
\t  } 
 
\t \t \t \t \t \t \t \t .list__item__inner 
 
\t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t width: 100%; 
 
\t \t \t \t \t \t \t \t \t color: #474d51; 
 
\t \t \t \t \t \t \t \t \t background-color: #DEFEEC; 
 
\t \t \t \t \t \t \t \t \t border: 1px groove #F8F8F8; 
 
\t \t \t \t \t \t \t \t \t overflow: hidden; 
 
\t         margin-left:2%; 
 
\t \t \t \t \t \t \t \t \t margin-right:2%; 
 
\t \t \t \t \t \t \t \t \t -webkit-box-shadow: 0 0.125rem 0.313rem rgba(0, 0, 0, .2); /* 2 5 */ 
 
\t \t \t \t \t \t \t \t \t box-shadow: 0 0.125rem 0.313rem rgba(0, 0, 0, .2); /* 2 5 */ 
 
\t \t \t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t \t \t \t .list__item figcaption 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t padding: 1.25rem; /* 20 */ 
 
\t \t \t \t \t \t \t \t \t } 
 

 

 

 

 

 

 

 

 
.img-shadow { 
 
\t position: relative; 
 
\t max-width: 100%; 
 
\t float: left; 
 
\t } 
 

 
    .img-shadow::before { 
 
\t \t content: ""; 
 
\t \t position: absolute; 
 
\t \t top: 0; 
 
\t \t bottom: 0; 
 
\t \t left: 0; 
 
\t \t right: 0; 
 
\t \t box-shadow: inset 0 0 80px rgba(0,0,0,.6); 
 
\t \t -moz-box-shadow: inset 0 0 80px rgba(0,0,0,.6); 
 
\t \t -webkit-box-shadow: inset 0 0 80px rgba(0,0,0,.6); 
 
\t } 
 

 
.img-shadow img { 
 
\t float: left; 
 
\t } 
 

 

 

 

 
.titlebox{ 
 
\t width: 80%; 
 
\t height: 10%; 
 
\t display: inline-block; 
 
\t font-size: 4.2vh; 
 
\t font-family: Garamond; 
 
\t color: #002000; 
 
\t text-align: center; 
 
\t line-height: 35px; 
 
\t font-weight:bold; 
 
\t margin-top: 5%; 
 
\t margin-right: 10%; 
 
\t margin-bottom: 5%; 
 
\t margin-left: 10%; 
 
\t background-color:grey; 
 
\t 
 
} 
 

 

 
.locationbox{ 
 

 
\t width: 80%; 
 
\t display: inline-block; 
 
\t font-size: 3.7vh; 
 
\t text-align: center; 
 
\t font-weight:bold; 
 
\t margin-top: 10%; 
 
\t margin-right: 10%; 
 
margin-bottom: 5%; 
 
\t margin-left: 10%; 
 
    font-family: Garamond; 
 
    color: #002000; 
 
    font-style: italic; 
 

 
} 
 

 
.pricebox{ 
 
\t width: 80%; 
 
\t font-size: 4.2vh; 
 
\t text-align: center; 
 
\t font-family: Garamond; 
 
\t font-weight:bold; 
 
\t color: #002000; 
 
\t margin-top: 10%; 
 
\t margin-right: 10%; 
 
margin-bottom: 5%; 
 
\t margin-left: 10%; 
 
} 
 

 
\t \t \t \t \t .footer 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t text-align: center; 
 
\t \t \t \t \t \t margin: 2.5rem 0.625rem 0; /* 40 10 */ 
 
\t \t \t \t \t } 
 
\t \t \t \t \t \t .footer a 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t border-bottom: 1px solid #cfd7db; 
 
\t \t \t \t \t \t } 
 

 
\t \t @media screen and (max-width: 1950px){ 
 
.list__item 
 
\t \t \t { 
 
\t \t width: 32%; 
 
\t \t } 
 

 
.container 
 
\t \t \t \t \t { 
 

 
\t \t \t \t \t \t padding: 0; /* 10 */ 
 

 
\t \t \t \t \t } 
 

 

 
\t \t \t .titlebox{font-size:28px;} 
 
\t \t  .locationbox{font-size:28px;} 
 
\t \t  .pricebox{font-size:28px;} 
 
\t \t \t } 
 

 
\t \t @media screen and (max-width: 1700px){ 
 
\t \t .list__item 
 
\t \t \t \t \t { 
 
\t \t \t \t width: 32%; 
 
\t \t } 
 

 

 
\t \t .vignette { 
 
\t \t \t  width: 92%; 
 
\t \t \t  margin-top:5%; 
 
\t \t  margin-left:auto; 
 
\t \t  margin-right:auto; 
 
\t \t \t  box-shadow: 15px 15px 40px #defeec inset,-15px -15px 40px #defeec inset; 
 
\t \t \t  height: 240px; 
 
\t \t \t  background-size: cover; 
 
\t \t \t  background-repeat: no-repeat; 
 
\t } 
 

 
.container 
 
\t \t \t \t \t { 
 

 
\t \t \t \t \t \t padding: -10em; /* 10 */ 
 

 
\t \t \t \t \t } 
 

 
\t \t \t \t .titlebox{font-size:27px;} 
 
\t \t \t .locationbox{font-size:27px;} 
 
\t \t \t .pricebox{font-size:27px;} 
 
\t \t \t } 
 

 
@media screen and (max-width: 1440px){ 
 
\t \t .list__item 
 
\t \t \t \t \t { 
 
\t \t \t \t width: 32%; 
 
\t \t } 
 

 
.container 
 
\t \t \t \t \t { 
 

 
\t \t \t \t \t \t padding: 2.2em /* 10 */ 
 

 
\t \t \t \t \t } 
 

 
\t \t \t \t .titlebox{font-size:27px;} 
 
\t \t \t .locationbox{font-size:27px;} 
 
\t \t \t .pricebox{font-size:27px;} 
 

 

 
nav { 
 
\t border: 1px solid #ccc; 
 
\t border-right: none; 
 
\t border-left-color: #006600; 
 
\t width: 100%; 
 
\t margin-bottom: 20px; 
 
\t background-color: #006600; 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t font-size: 100%; 
 
\t color: #030303; 
 
} 
 

 
nav ul { 
 
\t display: flex; 
 
    flex-direction: row; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
nav ul li { 
 
    list-style: none; 
 
    text-align: center; 
 
    border-left: 1px solid #fff; 
 
    border-right: 1px solid #ccc; 
 
} 
 

 
nav ul li:first-child { 
 
    border-left: none; 
 
} 
 

 
nav ul li:hover { 
 
    background: #9cb369; 
 
} 
 

 
nav ul li a { 
 
\t display: block; 
 
\t text-decoration: none; 
 
\t color: #FFFFFF; 
 
\t padding: 10px 0; 
 
} 
 

 

 
nav { 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 

 

 
ul li { 
 
\t flex-grow: 1; 
 
} 
 

 
.x { 
 
    display: none; 
 
} 
 

 
.p { 
 
    text-align: center; 
 
    font-size: 14px; 
 
    margin-top: 80px; 
 
} 
 

 
.d { 
 
    color: #ccc; 
 
} 
 

 

 
    nav ul li { 
 
    display: block; 
 
    border-bottom: 1px solid #ccc; 
 
    } 
 

 
\t \t \t } 
 

 
\t \t @media screen and (max-width: 64em) /* 1024 */ 
 

 
\t \t { 
 

 
\t \t \t .list__item 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t margin-right:2%; 
 
\t \t \t \t \t \t margin-left:-1%; 
 
\t \t \t \t \t \t } 
 

 
\t \t \t \t .titlebox{font-size:24px;} 
 
\t \t \t .locationbox{font-size:24px;} 
 
\t \t \t .pricebox{font-size:24px;} 
 

 

 
\t \t \t .list__item .caption { 
 
       font-size: 2em; 
 
       } 
 

 
\t \t \t body 
 
\t \t \t { 
 
\t \t \t \t padding: 2.5rem 0; /* 40 */ 
 
\t \t \t } 
 

 
\t \t \t .list__item 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t width: 30%; /* 1 item per row */ 
 
\t \t \t \t \t \t \t float: none; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t @supports (display: -webkit-flex) or (display: -ms-flex) or (display: flex) 
 
\t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t html.no-js .list__item 
 
\t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t width: 30%; 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t html.no-js .list__item img 
 
\t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t max-width: none; 
 
\t \t \t \t \t \t \t \t float: none; 
 
\t \t \t \t \t \t \t \t margin-left: 0; 
 
\t \t \t \t } 
 
\t \t } 
 

 
\t \t @media screen and (max-width: 50em) /* 800 */ 
 
\t \t { 
 

 
.vignette { 
 

 
height: 400px; 
 
} 
 
\t \t \t \t .titlebox{font-size:23px;} 
 
\t \t \t .locationbox{font-size:23px;} 
 
\t \t \t .pricebox{font-size:23px;} 
 

 
\t \t \t .list__item 
 
\t \t \t { 
 
\t \t \t width: 70%; /* 1 items per row */ 
 
\t \t \t } 
 

 

 

 
\t \t } 
 

 
\t \t @media screen and (max-width: 40em) /* 640 */ 
 

 
\t \t { 
 
\t \t \t .vignette { 
 
width: 80% 
 
height: 300px; 
 
} 
 

 
\t \t \t \t .titlebox{font-size:21px;line-height:25px;} 
 
\t \t \t .locationbox{font-size:21px;} 
 
\t \t \t .pricebox{font-size:21px;line-height:25px;} 
 

 
\t \t \t .list__item 
 
\t \t \t { 
 
\t \t \t \t width: 70%;/* 1 items per row */ 
 
\t \t \t } 
 

 
\t \t }
<div class="container" role="main"> 
 
\t <ul class="list"> 
 
\t \t <li class="list__item"> 
 
\t \t \t <figure class="list__item__inner"> 
 
     
 
      <p class="vignette" style="background-image:url(http://www.ht-real-estate.com/template/ht2014/images/landscape/05.jpg)"></p> 
 
      <div class="titlebox">This line is <BR/> shorter than this :)</div> 
 
    <div class="locationbox">Location</div> 
 
     <div class="pricebox">Price</div> 
 
    </a> 
 
\t \t </li> 
 
\t \t <li class="list__item"> 
 
\t \t \t <figure class="list__item__inner"> 
 
      
 
      \t <p class="vignette" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/c/ce/James_Wadsworth_Rossetter_House_Front_1.jpg)"></p> 
 

 
    <div class="titlebox">Thisssss Lineeeeee is longer too</div> 
 
    <div class="locationbox">Location</div> 
 
     <div class="pricebox">Price</div> 
 
    </a> 
 
\t \t </li> 
 
\t \t <li class="list__item"> 
 
\t \t \t <figure class="list__item__inner"> 
 
      
 
      \t <p class="vignette" style="background-image:url(http://www.mytickerz.com/wp-content/uploads/prairie-style-house-plans-2.jpg)"></p> 
 

 
      <div class="titlebox">This line is shorter likeeeeeeeee it should be</div> 
 
      <div class="locationbox">Location</div> 
 
     <div class="pricebox">Price</div> 
 
    </a> 
 
\t \t </li> 
 
\t </ul> 
 

 
</div>

Io non sono davvero sicuro se c'è un modo per limitare la larghezza della linea superiore. L'unico modo che posso pensare è aggiungere un tag <br/> in un punto in cui si desidera suddividere il titolo e quindi impostare lo text-align: center; per lo .titlebox.

<div class="titlebox">This line is <br/> longer than this line</div>

fonte

2015-01-28 20:12:24 Wracker

+0

Non è una soluzione orribile se non c'è una soluzione più pulita. Apprezzo l'input – Nova

 Problemi correlati

  • Nessun problema correlato^_^