1

我只是想让这个页面上的所有文本出现在图片的右侧。一切都推到了下面。尝试将 float: left 添加到图像和文本，但它们只是从容器中出来并且位于相同的位置。

链接到现场演示

CSS

.full-bio-container {
    padding: 10px;
    background-color: #fff;
    margin-top: 40px;
}

#full-bio-chef-pic {
    display: inline-block;
    position: relative;
    left: 0;
    vertical-align: top;
}

.full-bio-info {
    display: inline-block;
    position: relative;
    left: 0;
    width: auto;
    height: auto;
    padding: 0px 10px 10px 10px;
    vertical-align: top;
}

HTML

<!-- Start Chef Bio -->
<div class="full-bio-container">
    <div id="full-bio-chef-pic">
        <img src="img/about/head-chef.jpg" alt="" title="" height="300" width="200" />
    </div>
    <div class="full-bio-info">
        <h4>Head Chef - Ed</h4>
        <p class="full-bio-caption">“Ed admiring the sample plates kindly supplied by Churchill’s, a strange love affair in ongoing with these plates. Thank You to Churchill’s for their amazing support"</p>
        <p>As soon as he was tall enough to reach the kitchen work-tops Ed would be found helping in the kitchen.  One of his mother’s earliest memories was seeing him standing on a chair naked except for an apron adding toppings to pizza bases!</p>
        <p>Over the years his passion for cooking had developed and his skills improved. After leaving school proudly clutching the Food Technology prize he went onto to study at Westminster Kingsway college London where he obtained the Professional Chef qualification. During his time at Westminster he won several competitions including National Young Chef of the year from this prestigious college.</p>
        <p>After leaving college Ed’s experience has ranged from fine dinning in London’s top restaurants to village gastro pubs, along with a wide variety of other experiences from private dinning and chalet chef to some of the UK’s top celebrities.</p>
        <p>It was as result of a conversation with one of his clients that The Naked radish was born. His is aim to share his passion for food and help you fall in love with cooking again by taking the drudgery away and creating inspiring, healthy recipe kits and sharing chef’s tips which often stay secret in the kitchen.</p>
    </div>
</div>
<!-- End Chef Bio -->
4

3 回答 3

2

尝试在 css 上更改这些。我改变了什么，我使内容更窄。并浮动两个容器，img 向左，内容向右。

#full-bio-chef-pic {
display: inline-block;
position: relative;
left: 0;
vertical-align: top;
float: left;
}

.full-bio-info {
display: inline-block;
position: relative;
left: 0;
width: auto;
float: right;
width: 700px;
height: auto;
padding: 0px 10px 10px 10px;
vertical-align: top;
}
于 2013-09-20T09:12:29.483 回答
1

如果你想浮动元素，他们需要一个固定的宽度。给 .full-bio-info 一个 695px 的宽度（例如）它会起作用。

或者该宽度是否有特殊原因：自动；?

如果你想要动态宽度，你应该使用“img/about/head-chef.jpg”作为 .full-bio-info 的背景图像，并为 .full-bio-info 提供 200 像素（或更多）的填充（左）也。

于 2013-09-20T09:20:11.773 回答
0

使用以下 CSS。我改变的是 float: left; 在 full-bio-chef-pic 上并删除了显示：full-bio-info 上的 inline-block。

#full-bio-chef-pic {
    display: inline-block;
    float: left;
    position: relative;
    left: 0;
    vertical-align: top;
}

.full-bio-info {
    position: relative;
    left: 0;
    width: auto;
    height: auto;
    padding: 0px 10px 10px 10px;
    vertical-align: top;
}

我希望这行得通。

于 2013-09-20T09:13:49.937 回答