0

我在这个网站上有下面的代码。滚动到底部，您会看到我的问题：我希望图像及其相关文本是内联的。

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

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

4

7 回答 7

1

行 ：

第一步删除这个：

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

第三步：

float:left;从#bio1 / #bio2 / #bio3中删除所有内容

你有这个：在此处输入图像描述

于 2013-08-02T14:22:01.437 回答
0

Float图像并使用 移动描述margin。同时height从包含的 div中删除

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

或者，您可以使用 CSStable布局（不是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 ”。

于 2013-08-02T14:15:48.407 回答
0

对于#bio1、#bio1 等：

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

对于图像：添加

float: left;

而且我认为您垂直对齐没有效果。父容器必须有 display: table 和带文本的 div 必须有 display: table-cell，v-align 才能生效

于 2013-08-02T14:20:56.197 回答
0

我会将这两个元素放在一个div中，并将图像设置为float:left和文本围绕它。

演示：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;
}
于 2013-08-02T14:22:25.943 回答
0

将您的格式更改为如下所示：

js小提琴：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>
于 2013-08-02T14:23:18.167 回答
0

将图像和文本放在同一个 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>

于 2013-08-02T14:23:59.857 回答
0

检查这个小提琴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>
于 2013-08-02T14:24:09.273 回答