Div 在 CSS/HTML 中的位置

Question

您好，请问有谁能帮我实现这张照片的布局吗？我正在尝试建立这个网站，但我目前的进展令人沮丧。我已经创建了基本布局，但它无法正常工作。

我不确定如何定位内容以匹配此图片。如果有人能指出我的写作方向那就太好了。

<body>
    <div>
        <div>
            <div>
                <div>
                    <h3>LOGO</h3>
                </div>
                <div>
                    <hr>
                    <h2>Console</h2>
                </div>
                <div class="form">
                    <form>
                        <div>
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                        </div>
                        <div>
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" id="exampleInputPassword1" placeholder="Password">
                        </div>
                        <a href="#forgot">Forgot your password?</a>
                        <button type="submit">Log in</button>
                    </form>
                </div>
            <div class="images">
                <a id="firstPostLink" target="_blank">
                    <div class="box" id="firstPostImg">
                    </div>
                </a>
                <a id="secondPostURL" target="_blank">
                    <div class="box"  id="secondPostImg">
                    </div>
                </a>
            </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script>
    <script src="https://storage.googleapis.com/feednami-static/js/feednami-client-v1.0.1.js"></script>
    <script src="app.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

这是 CSS`正文{ 背景色：#13253F；白颜色; }

a {
    text-decoration: none;
    color: white;
}

hr {
    border: solid #6cc1d6;
    border-width: 5px 5px 5px 5px;
    clear: both;
    margin: 10px 0;
    height: 0;
    width: 160px;
    position: relative;
    left: 100px;
}

h3 {
    text-align: center;
}

h2 {
    margin-left: 100px;
    margin-top: -15px;
}

label {
    color: #f0f0f0;
}

.form {
    padding: 20px;
    margin: 0 auto;
    position:relative
}

.box {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 600px;
    height: 600px;
    border:2px solid white;
}
.images {
    position:absolute;
    left:200px;
    height:100%;


}
#firstPostImg {
    position:relative;
    left:1100px;
    top:-300px;

}
#secondPostImg{
    position:relative;
    left:1100px;
    top:-300px;
    padding-bottom:0;
}`

这是 link 到 codepen

Answer 1

我会推荐 positioning/styling 您创建的所有内容。良好的代码将确保不同浏览器和设备的问题更少。

只使用您实际需要的容器 (div)，给它们一个 class 或 ID，并将所有内容正确放置在您的 CSS 中。至少你应该浮动并给你的关键结构 div 一个宽度，这样你就可以获得可预测的结果。

Answer 2

您没有明确说明要解决的具体问题。但我确实在代码中看到了一些应该改进的地方。第一个是您拥有的 divs 数量。看起来你可能有很多不必要的嵌套。

如果您的目标之一是提高响应速度，那么使用网格框架（例如 bootstrap or foundation）是个不错的主意。

使用 Bootstrap，我 created a wireframe of the beginning of what you're wanting to achieve. I'd recommend looking closely at how the grid 系统工作。那会有很大的不同。

Here's my demo.

HTML

<div class="row">
    <div class="col-md-9"> 
        <div class="row">
            <div class="col-md-12">
                <!-- Logo here-->
                <img src="http://placehold.it/335x115" class="img-responsive">
            </div>
        </div>
        <div class="row">
            <div class="col-md-2 col-md-offset-1">
                <!-- Console -->
                <h2>Console</h2>
            </div>
        </div>
        <form class="row">
            <!-- Form -->
            <div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-2">
                <div class="row">
                    <div class="col-md-12 form-group">
                        <label for="email" class="control-label">Email Address: </label><br>
                        <input type="email" name="email" id="email">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 form-group">
                        <label for="password" class="control-label">Password: </label><br>
                        <input type="text" name="password" id="password">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <a href="#forgot">Forgot your password?</a>
                    </div>
                    <div class="col-md-4">
                        <button type="submit" class="btn btn-primary">Log in</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <sidebar class="col-md-3 col-sm-12">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-xs-6">
                <img src="http://placehold.it/275x290" class="img-responsive">
            </div>
            <div class="col-lg-12 col-md-12 col-xs-6">
                <img src="http://placehold.it/275x290" class="img-responsive">
            </div>
        </div>
    </sidebar>
</div>

Answer 3

这是一种可能的解决方案：

$(document).ready(function() {
    feednami.load(urlToHT, getHeaderTagPost);
     feednami.load(urlToKX, getKXBlogPost);
});


var firstPostImg = $("#firstPostImg");
var secondPostImg = $("#secondPostImg");
var firstPost = $("#firstPost");
var secondPost = $('#secondPost');

var firstPostURL = $("#firstPostLink");
var urlToImg = "";

var urlToArticle = "";
var urlToHT = 'http://wiki.headertag.com/feed';
var urlToKX = "http://kx.indexexchange.com/feed/";
var secondPostUrl = $("#secondPostURL");

function  getHeaderTagPost(data) {
    if (data.error) {
        console.log(data.error);
    } else {
        var entries = data.feed.entries;

        console.log("Header Tag " + entries);
        urlToImg = removeCharacters(entries[0].image.url);
        urlToArticle = entries[0].link;
       
        firstPostImg.css("background-image","url("+ urlToImg +")");

        console.log(urlToImg);
       // firstPost.attr("src", urlToImg);       
        firstPostURL.attr("href", urlToArticle);
        
    }
}

function getKXBlogPost(data) {
    if (data.error) {
        console.log(data.error);
    } else {
        var entries = data.feed.entries;

        console.log("KX blog: " + entries);
        urlToImg = removeCharacters(entries[0].image.url);
        urlToArticle = entries[0].link;
       
        

        console.log(urlToImg);
        secondPostImg.css("background-image","url("+ urlToImg +")");
   
        secondPostUrl.attr("href", urlToArticle);
       
    }
}

function removeCharacters(string) {
    return string.substring(0, string.indexOf('?'));
}

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
body {
        background-color: #13253F;
        color: white;
    }
    
    a {
        text-decoration: none;
        color: #00AFE5;
    }
    
    hr {
        border: solid #6cc1d6;
        border-width: 5px;
        clear: both;
        margin: 10px 0;
        height: 0;
        width: 100%;
        position: relative;
      float: right;
    }
    
    h3.logo {
      margin-top: 110px;
        text-align: center; margin-bottom: 40px;
    }
    
    h2 {

    }
    
    label {
        color: #f0f0f0;
    }
    
    .form {
      margin-top: 100px;
    }
    
    .box {
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        width: 100%;
        height: 300px;
        border:2px solid white;
    }
    .images {
        position:absolute;
        right: 0px; top:0;
        height:100%;
     
        
    }
    #firstPostImg {
        position:relative;
      
    }
    #secondPostImg{
        position:relative;

        padding-bottom:0;
    }

@media screen and (max-width: 992px) {
  form.form {margin-top:30px;}
  #firstPostImg {margin-top: 30px;}
}

<div class="container">
  <div class="col-md-8">
    <div class="col-md-12">
      <h3 class="logo">Index Exchange</h3></div>
    <div class="col-md-3">
      <hr>
      <h2>Console</h2>
    </div>
    <div class="col-md-6">
      <form class="form">
        <div class="form-group">
          <label>Email address</label>
          <input type="email" class="form-control" placeholder="Email">
        </div>
        <div class="form-group">
          <label>Password</label>
          <input type="password" class="form-control" placeholder="Password">
        </div>
        <div class="row">
          <div class="col-md-7">
            <a href="#forgot">Forgot your password?</a>
          </div>
          <div class="col-md-5">
            <button class="btn btn-info btn-block" type="submit">Log in</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <div class="col-md-4">
    <a id="firstPostLink" target="_blank"><div class="box" id="firstPostImg"></div></a>
    <a id="secondPostURL" target="_blank"><div class="box" id="secondPostImg"></div></a>
  </div>

</div> <!-- end of .container -->

<script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script>
<script src="https://storage.googleapis.com/feednami-static/js/feednami-client-v1.0.1.js"></script>
<script src="app.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Div 在 CSS/HTML 中的位置

Position of Divs in CSS/HTML

html

css

positioning