How to make a layout so that the description of the photo does not exceed the size of the photo?
I didn't know how to correctly formulate the task of one issue, so if the question is unclear and/or incorrect, I apologize. The task is this:
There is a certain photo, it can be of arbitrary size, and we can't know what.
Under the photo should be a description of the photo (i.e. name of the work, etc.) and the name of the author photo. At the same time - the name is pressed to the left edge of the photo, and the author's name to right. The picture with the description is the heart of the text a great article.
The title and the name of the author:
- can be random length
- random number of rows
aligned at the top
- always within the limits of the image located above
Is it possible to realize this task using only HTML and CSS, considering that it must support all modern browsers and IE8+?
PS I tried to align the blocks completely, but in this case the blocks out of the flow when the number of rows is greater than 1, the tooltip begins to crawl on the text of the article.
Also tried to do the blocks contain the description and author name inline-block, in this case, like all great - but if the description text is too long the name of the author climbs for photo borders. When table-cell is similar to inline-block.
Maybe I'm missing some elementary point of view in virtue of the accumulated daily fatigue. Help if not difficult, with the solution of the problem ) Thank you!
There is a certain photo, it can be of arbitrary size, and we can't know what.
Under the photo should be a description of the photo (i.e. name of the work, etc.) and the name of the author photo. At the same time - the name is pressed to the left edge of the photo, and the author's name to right. The picture with the description is the heart of the text a great article.
The title and the name of the author:
- can be random length
- random number of rows
aligned at the top
- always within the limits of the image located above
Is it possible to realize this task using only HTML and CSS, considering that it must support all modern browsers and IE8+?
PS I tried to align the blocks completely, but in this case the blocks out of the flow when the number of rows is greater than 1, the tooltip begins to crawl on the text of the article.
Also tried to do the blocks contain the description and author name inline-block, in this case, like all great - but if the description text is too long the name of the author climbs for photo borders. When table-cell is similar to inline-block.
Maybe I'm missing some elementary point of view in virtue of the accumulated daily fatigue. Help if not difficult, with the solution of the problem ) Thank you!
asked September 18th 19 at 23:55
3 answers
answered on
Solution
codepen.io/chuv/pen/ByPpww something like this
answered on September 18th 19 at 23:59
can add to the unit where a lot of text a fixed width of 150 pixels. Then the text will not run, and be transported to a new line
answered on September 19th 19 at 00:01
Need to wrap this whole thing in a div and set inline-block and block with description and author also wrapped in a separate div. Then the description and the author set to inline-block. The author put text-align: right. Description set the width to 40%, and the author of 30%. With width you can experiment to your taste.
And special thanks for the living example! =) - bernie_Pagac commented on September 19th 19 at 00:00