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はdivclass= "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が発生するため、nl2br関数を使用せずに$ post ['contents']をエコーするだけで、必要なソリューションが得られますか？<br />

それが失敗した場合は、

#post_content br{
    display:none;
}

#post_content内のすべてのbrを非表示にします:)

于 2012-06-12T12:15:13.857 に答える
0

ページに複数の投稿を表示している可能性があると仮定すると（ divのforeach上のループがある場合）、 idは一意の要素識別子であるためpost、あなたpost_titleとdivはクラスである必要があります。post_contentそうは言っても、これを試してください（IDをクラスに変更した後）：

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;
}

または、 Twitter BootstrapなどからCSSリセットを使用してみてください：

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 に答える