Question

我只是想让这个页面上的所有文字显示在图片的右侧。一切都被推到了下面。尝试添加浮动：左边是图像和文本，但它们只是从容器中取出而且处于相同的位置。

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

Answer 1

尝试在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;
}

Answer 2

如果要浮动元素，则需要固定宽度。给.full-bio-info宽度为695px（例如），它将起作用。

或者这个宽度是否有特殊原因：auto; ？

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

Answer 3

使用以下CSS。我改变的是浮动：左;在完整的生物厨师图片和删除显示：全生物信息的内联块。

#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;
}

我希望这有效。

Div位于之前的位置

3 个答案: