文章/答案/技术大牛

发布

社区首页 >问答首页 >有问题显示两个Div就在对方旁边

问有问题显示两个Div就在对方旁边
EN

Stack Overflow用户

提问于 2022-10-17 22:41:09

回答 1查看 19关注 0票数 0

我一直在试着让这两个div显示在一起。我查过很多方法。我已经显示:内联块，柔性盒，CSS网格。他们似乎都不起作用。我用flex做了一些研究，但我发现很多文章我只列出了父div，然后列出了子div，子div只是被使用了两次，用来创建两个div相邻的完全相同的属性。我试图在两个div旁边显示两个div，但这两个div内部也有div，以便在博客中显示单个行的样式。

这是我的blog.css样式表。我使用的是..blog包装作为应该在左边的div。博客包装后的div是将左div中的单个行样式化。

@charset "utf-8";
/* CSS Document */

.blog-wrap {
    padding: 20px;
    text-align: left;
    width: 500px;
    display:inline-block;
}

#blog-title {
    font-size: 18px;
    font-weight: 700;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #666;
}

#blog-posted-by-date {
    font-size: 12px;
}

#blog-content {
    font-size: 14px;

接下来，我们有显示内容的实际页面。我在页面中输入了样式表，因为这是登陆页面，我计划只在这个页面上使用这些样式。.landing_page_main是父div，应该是相邻的两个div在里面。登陆-主登录-寄存器是应该在右边的div元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <META name="keywords" content="">
    <link rel="stylesheet" href="css/layout.css" />
    <link rel="stylesheet" href="css/nav.css" />
    <link rel="stylesheet" href="css/blog.css" />
    <link rel="stylesheet" href="css/footer.css" />
    <link rel="stylesheet" href="css/forms.css" />
    <title></title>
  </head>
    <body>
    <style>
    .landing_ad_field {
        text-align: center;
        background-color: #CCC;
        max-width: 900px;
        height: auto;
        margin: auto;
        border-radius: 5px;
        font-size: 18px;
    }
    
    .landing_page_main {
        background-color: #CCC;
        opacity: 0.5;
        width: 900px;
        max-width: 900px;
        max-height: 500px;
        margin: auto;
        margin-top: 5px;
        margin-bottom: 5px;
        border-radius: 5px;
        padding: 5px;
        box-sizing:border-box;
        display: table;
    }
    
    .landing-main-login-register {
        padding: 5px;
        text-align: center;
        font-size: 50px;
        border: 5px solid #999;
        width: 400px;
    }
    </style>
    <center><img src="../images/Official Logo.png" width="300" /></center>
    <section class="public_nav_bar">
        <div id="public_nav_bar">
            <a href="profile.php">Directory</a> &middot; 
            <a href="account-managment/account-settings.php">Education</a> &middot; 
            <a href=""></a> &middot;
            <a href="">Events</a> &middot; 
            <a href="account-management/logout.php">Contact Us</a>
            </div>
            </section>
    <section class="landing_ad_field">
        Advertisement Placement
    </section>
    
    <section class="landing_page_main">
        <div class="blog-wrap">
        News Area
<?php
    include 'db_connect.php';
    $sql = "select * from blog";
    $result = mysqli_query($conn,$sql);
    while($row = mysqli_fetch_array($result)) {
        echo '<div id="blog-title">' .$row['title'] .'</div>';
        echo '<div id="blog-posted-by-date">Posted By ' .$row['posted_by'] .', ' .date("F j Y g:i:s" , strtotime($row['date'])) .'</div>';
        echo '<div id="blog-content">' .$row['content'] .'</div>';
        }
        ?>
        </div>
        <div class="landing-main-login-register">
        &#9998;
        <a href="account-management/researcher-register.php">Register</a>
        <br/>
        <hr/>
        &#128274;
        Log In
        
        </div>
    </section>
    
     <?php require 'master-pages/footer.html' ?>
    </body>
</html>

目前，他们显示堆叠，与登录寄存器-寄存器div下面的博客包装。

如有任何建议，将不胜感激。

css-grid

display

html

css

回答 1

Stack Overflow用户

发布于 2022-10-17 23:10:25

只是想更新说我解决了这个问题。我有一个想法，将flex框添加回CSS中，用于两个主要的左、右div，然后我将div内部更改为span。

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74103975

复制

相似问题

问有问题显示两个Div就在对方旁边
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有问题显示两个Div就在对方旁边EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有问题显示两个Div就在对方旁边
EN