开发者

How do I make a line not return?

开发者 https://www.devze.com 2023-03-10 01:48 出处:网络
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 p

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;
0

精彩评论

暂无评论...
验证码 换一张
取 消