图像从行中出来

Question

我里面有一张图片row > col-md-6。

我想将图像移到其列的右侧。

我创建了以下两个类 - .pos1 和 .pos2

.pos1 {
    position: relative;
}
.pos2 {
    position: absolute;
    right: 0px;
}

在使用这些类时，图像从行中出来并且不再响应。

html代码如下：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>My Faourite App</title>
</head>

<body>
    <div class="container">
        <div class="row">
                <h1 class="title">MY FAVORITE APP</h1>
        </div>
        <div class="row">
            <div class="col-md-6 pos1">
                <img src="http://placehold.it/300x300" class="img-responsive pos2" alt="hello">
            </div>
            <div class="col-md-6">
                <div>In ac ipsum quis turpis adipiscing commodo. Mauris fermentum quam.<div>
            </div>
        </div>
    </div>
</body>
</html>

请指出我做错了什么。我在 IE12 和 Chrome

上都尝试过

Answer 1

不要使用 position: absolute 它（几乎）总是一个问题。尝试使用 bootstrap class pull-right 和 clearfix 而不是 .pos1 和 .pos2。 pull-right class 在图像上，clearfix class 在图像的父级上。检查是否有效。

Answer 2

你可以使用这个类:

.row {position:relative;overflow:hidden;}
.pos1 {position:absolute; right:0; height:100%;}
.pos1 img {position:absolute; right:0; height:100%;}

FIDDLE

Answer 3

同时删除：

.pos1 {
    position: relative;
}
.pos2 {
    position: absolute;
    right: 0px;
}

两者都不需要，因为 .col-md-6 已经是 position:relative，您可以使用 bootstrap 助手类，例如 .pull-right。

Answer 4

虽然向右拉的方法有一个技巧。当您小于 col-ms-6 时，它就像一个浮动图形。使文本环绕它。最简单的做法就是添加 img{margin-left:auto;} 并忘记多余的 css.

JSFiddle

此外，如果您希望所有其他元素与 container 对齐，您需要放置某种类型的 col-{size}-{number} 否则您的边距将不会对齐。

<div class="container">
    <div class="row">
        <!--Adding 'col-md-12' allows the margins to line up with other 'col-' items-->
        <div class="col-md-12">
             <h1 class="title">MY FAVORITE APP</h1>

        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <img src="http://placehold.it/300x300" class="img-responsive" alt="hello" style='margin-left:auto;' />
        </div>
        <div class="col-md-6">
            <div>In ac ipsum quis turpis adipiscing commodo. Mauris fermentum quam.</div>
        </div>
    </div>
</div>

图像从行中出来

Image comes out of the row

html

css

twitter-bootstrap-3