Question

我想将我的代码中的图像对齐到右边，这样我就必须在两行中对齐它们，左右两边都有文本和链接，我尝试了很多其他的东西，浮动，但没有一些问题它永远不会工作这是我的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,intial-scale=1">
        <title>Marko's portfolio</title>
        <link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet'>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="js/jquery-2.1.3.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                <img src="http://placehold.it/100x100" class="img-responsive logo" alt="Responsive image">
                </div>
                <div class="col-md-6 text-right text-uppercase">
                    <h1>Name</h1>
                    <h3>Front-end Ninja</h3>
                </div>
            </div>
            <div class="row">
            <div class="col-md-12">
            <hr class="line">
            </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <img class="img-responsive picture" alt="Responsive image" src="images/ideja.jpg">
                </div>
            </div>
            <div class="row text-center">
                <div class="col-md-12">
                    <h2>Featured Work</h2>
                </div>
            </div>
            <div class="row text-thin text-center">
                <div class="col-md-6">
                    <img src="http://placehold.it/555x300" class="img-responsive" alt="Responsive image" data-toggle="modal" data-target="#project1">
                        <h3>Appify</h3>
                    <p><a href="http://github.com">Link to project</a></p>
                </div>
                <div class="col-md-6">
                    <img src="http://placehold.it/555x300" class="img-responsive" alt="Responsive image">
                    <h3>Appify</h3>
                    <p><a href="http://github.com">Link to project</a></p>
                </div>
            </div>
            <div class="row text-thin text-center">
                <div class="col-md-6">
                    <img src="http://placehold.it/555x300" class="img-responsive center-block" alt="Responsive image">
                    <h3>Appify</h3>
                    <p><a href="http://github.com">Link to project</a></p>
                </div>
                <div class="col-md-6">
                    <img src="http://placehold.it/555x300" class="img-responsive center-block" alt="Responsive image">
                    <h3>Appify</h3>
                    <p><a href="http://github.com">Link to project</a></p>
                </div>
            </div>
        </div>

这是css

body { font-family: 'Fredericka the Great', cursive;
}

.display {}

.text-thin{font-size: 14px;
}

.line {border-top-width:0px;height:2px;background-color:rgb(42,35,35);
}

.logo { margin-top:20px;
}

.picture { width:1440px; height:500px;}

谢谢！

Answer 1

您可以像{％}那样使用margin-left：

.logo { 
    margin-top:20px;
    margin-left: 40%;
}

其他图片：

.col-md-6 img {
    margin-left: 10%;
}

根据你的评论编辑你希望图像符合容器的孔尺寸，所以你喜欢跟随：

.col-md-6 img {

    width: 100%;
    height: 100%;
}

<强> Live demo

Answer 2

我认为你应该应用一个clearfix或者只是精确溢出框并将img float right和text放在一个容器浮动左边，如：

<div class="col-md-6 clearfix project">
    <img src="http://placehold.it/555x300" alt="Responsive image">
    <div class="description">
        <h3>Appify</h3>
        <p><a href="http://github.com">Link to project</a></p>
    </div>
</div>

和css：

.project {
    overflow: hidden;
}
.project .description {
    float: left;
}
.description {
    float: left;
}

如何在不使用浮动的情况下将框中的图像右对齐

2 个答案: