为什么我的图片没有放在文本的右侧？

时间：2013-12-26 09:42:58

标签： html css

嗨，你知道为什么我的照片放在我的文章下面而不是在我想要的右边吗？非常感谢http://jsfiddle.net/2RqGu/1/

图片放置在文本的下一个而不是右侧： enter image description here HTML 

<div class="block width100 white-background">
    <ol class="block_numbers">
         <h3>Notre approche</h3>

        <li>
            <p><strong>Title 1</strong>

            </p>
            <div class="element">
                <article>
                    <p>eugiat neque. Vivamus placerat, mi sed vulputate euismod, enim justo pellentesque justo, sit amet aliquet tortor est ac turpis. Pellentesque consequat libero non fringilla dictum. Proin risus lectus, imperdiet tincidunt massa quis, consequat porttitor dui. Nam vel mi sed enim sollicitudin varius ut ac augue.</p>
                    <img src="http://placehold.it/150x150" />
                </article>
            </div>
        </li>
        <li>
            <p><strong>Title 2</strong>

            </p>
            <div class="element">
                <article>
                    <p>eugiat neque. Vivamus placerat, mi sed vulputate euismod, enim justo pellentesque justo, sit amet aliquet tortor est ac turpis. Pellentesque consequat libero non fringilla dictum. Proin risus lectus, imperdiet tincidunt massa quis, consequat porttitor dui. Nam vel mi sed enim sollicitudin varius ut ac augue.</p>
                    <img src="http://placehold.it/150x150" />
                </article>
            </div>
        </li>
    </ol>
</div>

CSS 

.block {
    padding: 20px;
    background-clip: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #333;
}
.width100 {
    width: 100%;
}
.white-background {
    background: #fff;
}
.block_numbers {
    counter-reset: li;
    margin: 0 0 0 5px;
    padding-left: 0;
}
.block_numbers h3 {
    color: #3A7CDB;
    font-size: 28px;
    font-weight: 300;
    margin-top: 0;
}
.block_numbers p {
    display: inline-block;
    margin: 0 0 5px;
}
.block_numbers > li {
    list-style: none outside none;
    margin: 0 0 27px;
    position: relative;
}
.block_numbers > li:before {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #3A7CDB;
    border-radius: 2px;
    color: #FFFFFF;
    content: counter(li, decimal);
    counter-increment: li;
    display: inline-block;
    font-size: 13px;
    margin-right: 6px;
    padding: 1px 0;
    text-align: center;
    top: -2px;
    width: 22px;
}
.element {
    width:100%;
    display:table;
    background:rgb(134, 226, 255);
    margin:10px 0px;
    padding:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
p {
    display:table-cell;
    height:100%;
    vertical-align:top;
    background:white;
}
img {
    display:table-cell;
}

10 个答案:

答案 0 :(得分：1)

添加了宽度：

p {
    display:table-cell;
    height:100%;
    vertical-align:top;
    background:white;

   width:70%;
}

HTML p是块级元素。因此，如果你没有给它一个宽度，它的宽度将等于100％。

修改 如果您的图片没有任何固定宽度，则可以设置img的宽度：

img{

width:28%;
}

p为70％，img为28％。使用margin（p）等<{1}}为.block_numbers p休息2％。

答案 1 :(得分：1)

首先，将图像放在<p>中以生成有效的HTML。如果要将图像保留在白色背景之外，请创建第二个段落。

        <article>
            <p class="content">eugiat neque. Vivamus placerat, mi sed vulputate euismod, enim justo pellentesque justo, sit amet aliquet tortor est ac turpis. Pellentesque consequat libero non fringilla dictum. Proin risus lectus, imperdiet tincidunt massa quis, consequat porttitor dui. Nam vel mi sed enim sollicitudin varius ut ac augue.</p>
            <p class="image"><img src="http://placehold.it/150x150" /></p>
        </article>

其次，您需要缩小第一段的大小以保留图像的位置：

  p.content {
      width:70%;
  }

<强> Updated JSFiddle

答案 2 :(得分：1)

设置包含其余部分的主div的宽度，以便width: 70%有一个参考。

答案 3 :(得分：1)

Greg和maxime都是正确的，只需在你的css中添加一些代码块，你就可以看一下css文件http://jsfiddle.net/2RqGu/6/

的最后一节中的一些变化 
p {
    display:table-cell;
    height:100%;
    vertical-align:top;
    background:white;
    float:left;
    width:70%;
}
img {
    display:table-cell;
    float:right;
    width:30%;
}

答案 4 :(得分：1)

只需将段落的宽度设置为“70％”

即可 
 p{ 
  width:70%;
}

答案 5 :(得分：1)

由于您没有设置任何宽度％或px，因此它会占据整个块并向下推动图像。

这是可行的代码

我在

TAG中添加了一个名为“lt”的类，它强制文章中的段落通过将其宽度设置为73％来为图片提供空间。

<div class="block width100 white-background">
<ol class="block_numbers">
     <h3>Notre approche</h3>

    <li>
        <p><strong>Title 1</strong>

        </p>
        <div class="element">
            <article>
                **<p class="lt">**eugiat neque. Vivamus placerat, mi sed vulputate euismod, enim justo pellentesque justo, sit amet aliquet tortor est ac turpis. Pellentesque consequat libero non fringilla dictum. Proin risus lectus, imperdiet tincidunt massa quis, consequat porttitor dui. Nam vel mi sed enim sollicitudin varius ut ac augue.</p>
                <img src="http://placehold.it/150x150" />
            </article>
        </div>
    </li>
    <li>
        <p><strong>Title 2</strong>

        </p>
        <div class="element">
            <article>
                **<p class="lt">**eugiat neque. Vivamus placerat, mi sed vulputate euismod, enim justo pellentesque justo, sit amet aliquet tortor est ac turpis. Pellentesque consequat libero non fringilla dictum. Proin risus lectus, imperdiet tincidunt massa quis, consequat porttitor dui. Nam vel mi sed enim sollicitudin varius ut ac augue.</p>
                <img src="http://placehold.it/150x150" />
            </article>
        </div>
    </li>
</ol>
</div>

lt 类css代码

.lt{
  float:left;
  width:73%;
  position:relative;
}

img {
  display:table-cell;
  float:right;
  position:relative;
  width:25%;
}

Working Jsfiddle example

答案 6 :(得分：0)

使用float属性。

 img {
     display:table-cell;
     float:right;
 }

以下是更新小提琴http://jsfiddle.net/2RqGu/5/

答案 7 :(得分：0)

使用CSS Float属性：

Fiddle

<强> CSS ：

img {
    display:table-cell;
    float:right;
}

答案 8 :(得分：0)

你需要对你的CSS进行小的修改

p{

 width:60%;
    overflow:hidden;
}
img
{
float:right;
}

它会起作用

答案 9 :(得分：0)

没有table-cell或某些预定义width的一个简单解决方案是将img放在段落前面

<article>
    <img src="http://placehold.it/150x150" />
    <p>eugiat neque. Vivamus placerat, mi sed vulputate ...</p>
</article>

删除display: table*并使用

.element img {
    float: right;
}

您还必须更具体地使用标题段落

<p class="block_title"><strong>Title 1</strong>

和

.block_numbers .block_title {
    display: inline-block;
    margin: 0 0 5px;
}

否则这也适用于.element段落。

请参见修改后的JSFiddle

相关问题
最新问题