Question

我正在创建一个网站，我似乎无法按照自己的意愿配置布局。

这就是我所拥有的：

enter image description here

我正在尝试删除左侧链接旁边的橙色空间。我想要新闻源部分，但推到了导航栏下面的顶部。

左边显示“朋友发帖”，“收件箱”等部分是自己的div。在该div中还有两个宽度较小的div，一个包含配置文件图像，另一个包含用户名（在本例中为Reece Kenney）。新闻源部分是另一个与之前的div分开的div。

包含左侧内容的div已被设置为没有边距，因此我无法弄清楚为什么它仍然显示它在页面上一直有边距。

这是我的php代码：

if (stripos($_SERVER['REQUEST_URI'], 'home.php')){
         echo "<div id='wrapperNoImageNewsfeedLeft'><br/> <br/>

                <div id='smallProfilePicLeft'>
                    <a href='$user' id='hyperlink'><img src='$profilePic' height='45' width='37' alt='Your profile' title='Your profile' /></a>
                </div>

                <div id='smallNameLeft'>
                    <a href='$user' id='hyperlink'>$firstName $lastName</a>
                </div>

                <br/> <br/><br/> <br/>";

            echo "<a href='home.php' id='hyperlink' style='font-weight: bold;'>Posts by Friends</a> 

            <br/> <br/>

            <a href='public_posts.php' id='hyperlink' >Posts by Public</a><br/> <br/>
            ";

        echo '<a href="/arrowBerry/my_messages.php" id="hyperlink">Inbox</a>
                </div>';
}
<div id="wrapperNoImage">
/*Newsfeed section....
...
...
*/
</div>

我读到我可能不得不将我的一些内容“but”在一起，因为这个问题是由我的代码中的空白引起的，但我不确定这究竟意味着什么以及我需要将哪些部分“对接”在一起，如果那样的话甚至是这里的问题。

更新：

我被告知不需要PHP代码，我需要发布我的HTML代码。这是我认为我需要的所有代码。页面上唯一的其他HTML代码是导航栏，但无论如何我都会发布它。

<div class='newsFeed'>
    <h2>Your Newsfeed:</h2>
    <a href="home.php" id="hyperlink" style='font-weight: bold;'>Posts by Friends</a>
    <a href="public_posts.php" id="hyperlink" >Posts by Public</a>
</div>


<div class="newsfeedPostForm">
    <form action="home.php" method="POST">
        <textarea id="newsfeedPost" name="post" rows="5" cols="90"></textarea>
        <input type="submit" name="send" class="postFormSubmit" value="Post">
    </form>
</div>

CSS：

#wrapperNoImage {
margin-left: auto;
margin-right: auto;
height: auto;
width: 780px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
border-left: 1px solid #cad3dc;
border-right: 1px solid #cad3dc;
}

#wrapperNoImageNewsfeedLeft {
height: auto;
width: 170px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
margin: none;

}
#smallProfilePicLeft {
float: left;
height: auto;
width: 50px;
margin-right: none;
}
#smallNameLeft {
float: left;
height: auto;
width: 100px;
margin-right: 0px;
}

更新2：这些解决方案都不适用于我，因此我将发布我在浏览器中显示的整个HTML代码。

<!doctype html>
<html>
    <head>
       <title>arrowBerry</title>
            <link rel="stylesheet" href="/arrowBerry/css/style.css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">    </script>
        <script src="js/jquery.color.js"></script>
        <script src="js/script.js"></script>
        <script src="js/placeholder-js.js" type="text/javascript"></script>
        <script src="js/main.js" type="text/javascript"></script>
    </head>
    <body>
    <div class="headerMenu">
        <div id="wrapper">
            <div class="logo">
                <img src="/arrowBerry/img/logo.png"/>
            </div>
            <div class="searchBox">
                <form action="search.php" method="GET" id="search">
                    <input type="text" name="q" size="60" placeholder="Search ..." />
                </form>
            </div>
            <div id="menu">
                <a href="/arrowBerry/home.php">Home</a>
                <a href="/arrowBerry/reece55">reece55</a>
                <a href="/arrowBerry/my_messages.php">Inbox</a>
                <a href="/arrowBerry/friend_requests.php">Friend Requests</a>
                <a href="/arrowBerry/my_pokes.php">Pokes</a>
                    <a href="/arrowBerry/accountSettings.php">Settings</a>
                <a href="/arrowBerry/logout.php">Log Out</a>
            </div>          
                </div>
    </div>
    <div id='wrapperNoImageNewsfeedLeft'><br/> <br/>
                <div id='smallProfilePicLeft'>
                    <a href='reece55' id='hyperlink'><img src='userdata/profile_pics/Od9MJ3riRbDyjo4/Screen Shot 2014-06-02 at 17.20.38.png' height='45' width='37' alt='Your profile' title='Your profile' /></a>
                </div>
                <div id='smallNameLeft'>
                    <a href='reece55' id='hyperlink'>Reece Kenney</a>
                </div>
                <br/> <br/><br/> <br/><a href='home.php' id='hyperlink' style='font-weight: bold;'>Posts by Friends</a> 
            <br/> <br/>
            <a href='public_posts.php' id='hyperlink' >Posts by Public</a><br/> <br/>
            <a href="/arrowBerry/my_messages.php" id="hyperlink">Inbox</a>
                </div>      <div id="wrapperNoImage">
        <br />
<div class='newsFeed'>
     <h2>Your Newsfeed:</h2>
     <a href="home.php" id="hyperlink" style='font-weight: bold;'>Posts by Friends</a>
     <a href="public_posts.php" id="hyperlink" >Posts by Public</a>
</div>


<div class="newsfeedPostForm">
<form action="home.php" method="POST">
<textarea id="newsfeedPost" name="post" rows="5" cols="90"></textarea>
<input type="submit" name="send" class="postFormSubmit" value="Post">
</form>
</div>

<div class='bottom'>
</div>

<script language="javascript">
$(document).ready(function() {
    var load = 0;
    $(window).scroll(function() {
        if($(window).scrollTop() == $(document).height() - $(window).height()) {
            load++;
            $.post("friends_newsfeed_ajax.php",{load:load},function(data) {
                $('.bottom').append(data);
            })
        }
    })
});

Answer 1

经过一堆或阅读之后，我自己想出来了。我错过了div中的float: left;。除非用户指定使用类似float: left;的内容，否则我不知道div会自动填充100％的宽度。所以我只是将float: left;添加到CSS文件中的div中。不管怎样，谢谢大家！

Answer 2

您所引用的空间不是严格意义上的边界（如果是，它会在您检查时显示为边距，但您的屏幕截图显示所选元素没有边距）。如果那个橙色框只是死空间，并且你希望#wrapperNoImage div显示在#wrapperNoImageNewsfeedLeft div旁边（而不是“下面”），那么尝试设置CSS属性：

display: inline;

在#wrapperNoImageNewsfeedLeft元素和#wrapperNoImage元素上。

如果这不能解决问题，请在浏览器中显示该页面的完整HTML副本。您目前发布的内容可能不足以在#wrapperNoImageNewsfeedLeft div之后彻底确定导致换行的原因。

HTML / PHP页面div显示边距，但边距设置为0

2 个答案: