0

所以我有我正在构建的这个博客，而困扰我的部分是在帖子 div 中。似乎每个元素都会自动换行。即使我漂浮它们或任何东西，它对我也不起作用。即使我将填充设置为 0，它也会在我不这样做的情况下继续分隔 div。

所以这是索引的主体

<body>

<div id="universe">




<h1>Chris's Blog</h1>


    <div id="content">

        <div id="menu">
        <?php 
            $temp = $_SESSION['username'];
            $real = get_full_name($temp);
            if(isset($_SESSION['username']))
            {
                echo '<br />'.'Welcome back, '. $real['name'] . ' ' . $real['last_name'] . '.';
            }
    ?>
    </div>
    <div id="subcontent">

        <div id="posts">


 <?php

foreach( $posts as $post)
{
    if( ! category_exists('name', $post['name']))
    {
        $post['name'] = 'Uncategorized';
}
?>

<div class="post">
    <div id="post_title">
        <h2><a href="index.php?id=<?php echo $post['post_id']; ?>"><?php echo $post['title']; ?></a></h2>
            <p>Posted on <?php echo date('d-m-Y h:i:s', strtotime($post['date_posted'])); ?> in <a href="category.php?id=<?php echo $post['category_id']; ?>"><?php echo $post['name']; ?></a>
                </p>

    </div>


    <div id="post_content">

<?php echo nl2br($post['contents']); ?></div>

<?php // check if session has been set
if(isset($_SESSION['username']))
{
        ?><div id="post_edit">
        <p><a href="delete_post.php?id=<?php echo $post['post_id']; ?>">Delete post</a></p>
    </div>
        <?php
    }
        ?>
</div>
<?php
}

?>
        </div>

        <div id="rightbar">
        <ul>
            <li><a href="index.php">Home</a></li>
            <?php 
                if( isset($_SESSION['username']))
                {
                    echo '<li><a href="add_post.php">Add Post</a></li>',
                        '<li><a href="add_category.php">Add Category</a></li>',
                        '<li><a href="logout.php">Logout</a></li>';
                }

                ?>
            <li><a href="index.php">Contact</a></li>
            <?php
            if(! isset($_SESSION['username']))
            {
                echo '<li><a href="login.php">Login</a></li>';
            }
            ?>
        </ul>
        </div>

    </div>

</div>

我说的 div 是 div class="post"，里面有 "post_title"、"post_content" 和 "post_edit" div。这是他们的CSS：

#post_title
{
    float:left;
    font-size:12px;
    width:580px;
}
#post_content
{
    float:left;
    width:580px;
}
4

2 回答 2

0

在您的帖子内容 div 中，您正在使用

<div id="post_content">;
    <?php echo nl2br($post['contents']); ?>;
</div>;

现在，这将转换所有 $post['contents']\n并\r导致<br />你不需要的换行符，所以也许只是在没有 nl2br 函数的情况下回显 $post['contents'] 会给你你需要的解决方案？

做不到这一点，做

#post_content br{
    display:none;
}

隐藏#post_content 中的所有br :)

于 2012-06-12T12:15:13.857 回答
0

假设您可能在页面上显示多个帖子（给定divforeach上方的循环post），您的 divpost_title和post_contentdiv 应该是类，因为 id 是唯一的元素标识符。也就是说，试试这个（在将 id 更改为 classes 之后）：

div.post .post_title {
    float:left;
    font-size:12px;
    width:580px;
}

    div.post .post_title h2 {
        margin: 0;
        padding: 0
    }

div.post .post_content {
    float:left;
    width:580px;
}

    div.post .post_content p {
        margin: 0;
        padding: 0;
    }

div.post .post_edit p {
    margin: 0;
    padding: 0;
}

或者，您可以尝试：

div.post * {
    margin: 0;
    padding: 0;
}

或者尝试使用 CSS 重置，例如来自Twitter Bootstrap：

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

// Display block in IE6-9 and FF3
// -------------------------

audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

// Prevents modern browsers from displaying 'audio' without controls
// -------------------------

audio:not([controls]) {
    display: none;
}

// Base settings
// -------------------------

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
// Focus states
a:focus {
  .tab-focus();
}
// Hover & Active
a:hover,
a:active {
  outline: 0;
}

// Prevents sub and sup affecting line-height in all browsers
// -------------------------

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}

// Img border in a's and image quality
// -------------------------

img {
  max-width: 100%; // Make images inherently responsive
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

// Prevent max-width from affecting Google Maps
#map_canvas img {
  max-width: none;
}

// Forms
// -------------------------

// Font size in all browsers, margin changes, misc consistency
button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}
button,
input {
  *overflow: visible; // Inner spacing ie IE6/7
  line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
  padding: 0;
  border: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer; // Cursors on all buttons applied consistently
  -webkit-appearance: button; // Style clickable inputs in iOS
}
input[type="search"] { // Appearance in Safari/Chrome
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
}
textarea {
  overflow: auto; // Remove vertical scrollbar in IE6-9
  vertical-align: top; // Readability and alignment cross-browser
}

使用上述任何一种方法，您都可以根据需要设置边距和填充。

于 2012-06-12T12:18:34.500 回答