Html 图像从行中出来_Html_Css_Twitter Bootstrap 3

Html 图像从行中出来

html css twitter-bootstrap-3

Html 图像从行中出来,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,我在row>col-md-6中有一个图像我希望将图像移到其列的右侧我创建了以下两个类-.pos1和.pos2 .pos1 { position: relative; } .pos2 { position: absolute; right: 0px; } 在使用这些类时，图像从行中出来，不再响应 html代码如下所示： <!DOCTYPE html> <html> <head> <link rel="styleshee

我在

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>


我的Faourite应用程序
我最喜欢的应用程序
以同样的方式，我们可以用同样的方式。毛里斯酵素码头。

请说明我做错了什么。

我在IE12和Chrome上都试过，不要使用

position:absolute

，这（几乎）总是一个问题。尝试使用引导类

pull right

和

clearfix

而不是

.pos1

和

.pos2

。pull right类用于图像，clearfix类用于图像的父级。检查是否有效。

您可以使用以下类：

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

删除两个：

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

这两种方法都不需要，因为col-md-6已经是

位置：relative

，您可以使用像

这样的引导帮助器类。不过，向右拖动方法有一个技巧。当您得到小于col-ms-6的值时，它就像一个浮动图形。使文本环绕它。最简单的方法就是添加img{marginleft:auto；}
，然后忘记多余的css

此外，如果希望所有其他元素与容器对齐
，则需要放置某种类型的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>


我最喜欢的应用程序
以同样的方式，我们可以用同样的方式。毛里斯酵素码头。