How can I prevent it from overlapping and overlapping other links when there is a link title that is too long and preserve the distance of the Preview links and the 02:20 timing of the audio & videono matter how short or long the link is.
What I want to achieve.
When adapting to mobile / responsive devices, how to respect your spaces of the content of the links without overlapping one after the other, avoid cluttering the links, in the same way keep the Preview distance and the 02:20 time of the audio & videowithout matter how long or short the link is.
What I want to achieve.
UPDATE Comment by Diego Martin
The problem will be shown to the naked eye since my code is executed, it can be seen that in the full screen of the browser with links that are too long, it protrudes from what is desired of the images. In this case, the ideal would be that it be attached as the first image, now changing from size (responsive) of the browser none of the structured links respect their space ideally it would be docked as the second image.
My layout code about list audio& linksvideo
.views {
width: 100%;
border-top: none;
background-color: white;
border-left: 1px solid rgb(230, 230, 230);
border-right: 1px solid rgb(230, 230, 230);
border-bottom: 1px solid rgb(230, 230, 230);
}
.views .view-links {
list-style-type: none;
margin: 0;
padding: 0 0px;
font-size: .99em;
}
.views .view-links li {
padding: 9px 20px 9px 20px;
border-top: 1px solid rgb(230, 230, 230);
}
.views .view-links li div {
display: inline;
}
.views .view-links li div a {
text-decoration: none;
display: block;
}
.view-preview {
color: #000;
float: right;
left: -160px;
position: relative;
top: -16px;
}
.length {
color: #000;
float: right;
position: relative;
top: -16px;
/*-ms-transform: translateY(-90%);
-webkit-transform: translateY(-90%);
transform: translateY(-90%);*/
}<div class="views">
<ul class="view-links">
<li>
<div>
<a href="#"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> audio video audio video audio video
<div class="view-preview"> Vista Previa</div>
<div class="length"> 02:34</div>
</a>
</div>
</li>
<li>
<div>
<a href="#"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video audio video
audio video audio video audio video audio video audio video audio video audio video audio video audio video
<div class="view-preview"> Vista Previa</div>
<div class="length"> 02:34</div>
</a>
</div>
</li>
<li>
<div>
<a href="#"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"> audio video audio video audio video
<div class="length"> 02:34</div>
</a>
</div>
</li>
</ul>
</div>
After looking at your question and exploring the different answers and what you wanted, I came to the conclusion that this is what you wanted:
Another way, using only show inline and assigning percentages to the width of the elements by
css. They are also vertically aligned at the top so that they resemble the desired format.It's much simpler to do it with tables:
0 complicated CSS. Tables are so misunderstood.
Update:
I would like to clarify something. I fully understand that there are people who do not like to use tables or certain components that seem outdated . But why use complex CSS rules for such a simple task? Or how about cross-browser CSS rule support, are you sure it will work in all browsers and won't have to be hacked to make it work?
It can be done with the property
flex, here's a small example of that:You can see how it still has the structure and there is nothing strange, the paragraph has
white-space.Now, if we take that to your code, it remains:
Update
Wearing
display: tableNow I have understood you. Let's see if this works for you: