How do I make a line not return?
I'm working on this website.(http://kristinbecker.com/everydaypart1_test.htm)
The client would like some space under the various jewelry pieces. How would I go about creaking a paragraph under the pieces but not have it return a line every time I create a new on. The length doesn't matter and the width is set. I just don't want the line to return. How would I go about doing this in html开发者_运维知识库 or css?
Pages: http://kristinbecker.com/everydaypart1_test.htm
http://kristinbecker.com/style.css
(Word of warning the Css might not match up, I took this job over from someone who was terminally ill. The Css sheet has some classes in it, but some are just embedded in the header of the individual pages.)
Any help would be awesome, thanks!
This is pretty simple in CSS after you've changed your HTML a bit. Your current structure is a little like this:
paragraph containing images
first image
second image
third image
fourth image
paragraph about first image
paragraph about second image
paragraph about third image
paragraph about fourth image
You can start by changing that to this:
unordered list
list item
image
paragraph about image
list item
image
paragraph about image
list item
image
paragraph about image
list item
image
paragraph about image
Now the images and their corresponding paragraphs are clearly linked. Now if the unordered list has the class images
:
.images {
margin: 0;
padding: 0;
overflow: auto;
}
.images li {
list-style-type: none;
margin: 0;
padding: 0;
width: 155px;
min-height: 500px; /* adjust this as you see fit */
float: left;
}
Now you don't even have to separate the images by rows; CSS will lay it all out for you.
By "return" I assume you mean wrap.
selector { whitespace: nowrap }
I had a quick look at your page.
Add this to your .underpics
class
display: inline-block;
精彩评论