内联图像和文本没有正确排列

Question

我在this site上有以下代码。滚动到底部，您将看到我的问题：我希望图像及其相关文本是内联的。

<div id="photo1" style="height:220px; width:740px; float:left; display:inline-block; vertical-align:top; margin:0;">
    <img src="media/mike_w.jpg" width="200" height="200" alt="Dr. Mike Moran" border="1">
    <div id="bio1" style="vertical-align:top; height:200px; width:540px; padding-left:220px; float:left; font-family:verdana,arial,sans-serif; font-size:11px;">Bio text blah blah</div>
</div>

关于如何解决此问题的任何想法？

Answer 1

Float图片并使用margin移动说明。同时从包含div中删除height

<div id="photo1" style="clear: both; width: 90%; margin: 0 auto;">
    <img src="media/mike_w.jpg" width="200" height="200" alt="Dr. Mike Moran" style='float: left; border: 1px solid black;'>
    <div id="bio1" style="margin-left:220px;  font-size:11px;">Bio text blah blah</div>
</div>

或者您可以使用CSS table布局（不 HTML表格），但我认为这不是必需的。

我还建议使用类来避免内联CSS：

CSS

.bio {
    clear: both;
    width: 90%;
    margin: 0 auto;
    font-family: Verdana, Arial, sans-serif;
}

.bio > img:first-child {
    float: left;
    border: 1px solid black;
}

.bio > div {
    margin-left: 220px;
    font-size: 11px;
}

HTML

<div id="photo1" class='bio'>
    <img src="media/mike_w.jpg" width="200" height="200" alt="Dr. Mike Moran">
    <div id="bio1"><p>Bio text blah blah</p></div>
</div>

我还建议查看“clearfixes”。

Answer 2

对于＃bio1，＃bio1等等：

width: 530px; //reduce width; remove padding;

对于图片：添加

float: left;

我认为你的垂直对齐没有效果。父容器必须有display：table和div，text必须有display：table-cell，for v-align生效

Answer 3

好的：

第一步删除：

#maincontainer {
    height: 1200px;/* remove this line */
    overflow: hidden;/* add this for float element */
}

第二步：

添加所有图片float:left;

#photo1 > img {float:left;}
#photo2 > img {float:left;}
#photo3 > img {float:left;}

第3步：

从＃bio1 /＃bio2 /＃bio3

中删除所有float:left;

你有这个：

Answer 4

我会将两个元素放在一个 div 中，然后将图片设置为float:left，并将文字放在其周围。

DEMO： http://jsfiddle.net/SZ7nr/4/

HTML：

<div id="photo1">
    <img src="http://www.animalhouseclinic.com/media/mike_w.jpg" width="200" height="200" alt="Dr. Mike Moran" border="1" />
    <div id="bio1">Bio text blah blah</div>
</div>

CSS：

#photo1{
    height:220px; 
    width:740px; 
    display:block; 
    vertical-align:top; 
    margin:0;    
}

#photo1 img{
    float: left;
    margin-right: 5px;
}

#bio1{
    vertical-align:top; 
    height:200px; 
    width:520px; 
    font-family:verdana,arial,sans-serif; 
    font-size:11px;
}

Answer 5

将格式更改为：

js fidlle：http://jsfiddle.net/hSFtV/3/

   <div id="photo1" style="height:220px; width:740px; float:left;">
                <p id="bio1"><img class="alignleft" style="border:none; float:left; padding:0 10px 10px 0" src="http://www.animalhouseclinic.com/media/mike_w.jpg" width="200" height="200" alt="Dr. Mike Moran" border="1">Content Here</p>


                <br><br>
                <div id="photo2" style="height:220px; width:740px; float:left">
                    <p id="bio2">
                    <img src="http://www.animalhouseclinic.com/media/chad_w.jpg" width="200"  style="border:none; float:left; padding:0 10px 10px 0" height="200" alt="Dr. Chad Steward" border="1">Contente Here</p>
            <br><br>
                <div id="photo3" style="height:220px; width:740px; float:left">
                <p id="bio3">
                <img src="http://www.animalhouseclinic.com/media/kelly_w.jpg"  style="border:none; float:left; padding:0 10px 10px 0"  width="200" height="200" alt="Dr. Kelly Keeney" border="1">Content Here</p>
</div>

Answer 6

将图像和文字放在同一个div中。

对齐图像

style: "float: left;"

并做必要的调整

我认为这有帮助：

<div id="bio1" style="vertical-align:top; margin:0; height:200px;   float:left; font-family:verdana,arial,sans-serif; font-size:11px;"><img class="alignleft" src="media/mike_w.jpg" width="200" height="200" alt="Dr. Mike Moran" border="1" style="
float: left;">
<p style="padding-left: 225px;"><strong>Dr. Mike Moran</strong>

attended Cornell University and obtained his B.S. in Neurobiology and Behavior in 1995.  He then followed his love of music and adventure to California where he attended the UC Davis School of Veterinary Medicine, graduating in 2002.
<br><br>
After practicing for 10 years in San Francisco, he and his ever expanding family moved to Louisville, Colorado where Dr. Mike joined the Animalhouse team.  He is honored to be a part of such a renowned Louisville establishment  - helping to continue the legacy of the Animalhouse commitment to the highest quality compassionate care.  Dr. Mike lives with his wife, also a veterinarian, his four children and their dog, three cats and hamster.  He enjoys listening to and playing music, snowboarding, fishing and hiking.</p>

Answer 7

检查这个小提琴http://jsfiddle.net/X2GMR/ 你有很多额外的风格。

CSS：

    .photo1 {
        position:relative; 
        height:220px; 
        width:740px; 
        margin:0;"
    }

    .photo1 img {
        float:left;
        width:200px;
        height:200px;
        margin-right:20px;
        border:1 px solid black;
        padding:0;
    }

    .photo1 p.bio1 {
        font-family:verdana,arial,sans-serif; 
        font-size:11px;
        margin-left:220px;
    }

标记：

    <div class="photo1" style=">
        <img src="http://lorempixel.com/g/200/200" width="200" height="200" alt="Dr. Mike Moran" />
        <p class="bio1" >Bio text blah blah</p>
    </div>

    <div class="photo1" >
        <img src="http://lorempixel.com/g/200/200" width="200" height="200" alt="Dr. Mike Moran"  />
        <p class="bio1" >Bio text blah blah</p>
    </div>