相关疑难解决方法(0)

我使用 flexbox 将页脚导航中的列表项分布在页脚的宽度上。

它在我的浏览器和 Chrome 的移动仿真中正确显示。但是，它在我测试过的任何移动设备（iPhone、iPad、三星平板电脑）上都会被忽略。

有没有人看到我不知道的代码有什么明显的错误？下面是我正在使用的 CSS/LESS 片段。

ul {
   display: flex;
   justify-content: space-between;
   width: 100%;
   padding: 0;

   li {
      padding: 0;
   }
}

我试图垂直对齐导航栏上的图标，然后尝试使用这种方法：

.element {
 position: relative;
 top: 50%;
 transform: translateY(-50%);
}

这是我的代码：

的HTML

<div class="navbar">
  <nav>
    <ul>
      <% if logged_in? %>
        <li><%= link_to "IOAKA", dashboard_path %></li>
        <li><%= link_to(image_tag("icon_ioaka.png", alt: "geometry IOAKA icon", 
        :class => "icon", :id => "ioaka_icon2"), dashboard_path) %></li>
        <li><%= link_to(image_tag("icon_settings.png", alt: "geometry settings icon", 
        :class => "icon", :id => "settings_icon"), edit_user_path(current_user)) %></li>
        <li><%= link_to(image_tag("icon_logout.png", alt: "geometry logout icon", 
        :class => "icon", :id => "logout_icon"), logout_path, method: "delete") %></li>
      <% else %>
        <li><%= link_to "IOAKA", root_path %></li>
        <li><%= link_to(image_tag("icon_login.png", alt: …

我不知道为什么我的边框在页面底部之前停止.我尝试了很多东西:清除浮动,100%,jQuery,vh,vmax +我已经从stackoverflow读取了其他问题,但总是在底部之前停止.

我有两个div section.left和section.middle.我试图让div 8 px上的边框section.left从页面顶部到底部.但如果页面变长,它就会停止.

见演示

HTML

<div class="wrapper">
    <section class="left">
        <header>
            <a class="logo" href="#"><img src="images/smallImage1.jpg" alt="Logo"></a>
        </header>
        <div class="intro">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis,</p>
            <a class="contact" href="#">Contact</a>
        </div>
        <div class="skills">
            <h6>Skills</h6>
            <ul>
                <li>Skill 1</li>
                <li>Skill 2</li>
            </ul>
        </div>
        <footer>
            <p>2016 - Site 1</p>
        </footer>
    </section>
    <section class="midle">
        <div class="post">
                <h2>Headline</h2>
                <img src="images/bigImage1.jpg" alt="Big image">
                <p>Lorem ipsum dolor sit …

我有一个div,我希望最大化,在父母的基础上100vh.

问题是我有两个pdiv,它们也可以根据窗口的宽度改变它们的高度,从而导致不同的大小.

现在,快速和肮脏的解决方案可能只是运行一个jQuery片段检测母体的大小div以及p基于这些div,并设置div的高度上运行的功能doc.ready和window.onresize.

但这感觉不必要,我想知道是否有一个更简洁的解决方案只使用我不知道的CSS？

我已经在下面设置了一个简化但不起作用的问题版本,看看你是否能比我所指的更清楚.

任何提示都会很棒,谢谢!

*{
  margin: 0;
  padding: 0;
  font-family: Arial, san-serif;
}

#parent{
  height: 100vh;
  background: lightblue;
}

p{
  font-size: 40px; 
  background: yellow;
 }

#p1{
  top: 0;
}

#p2{
  bottom: 0;
  position: absolute;
}

div{
  background-color: red;
  height: 100%;
}

<div id="parent">
  <p id="p1">Long block that only appears on the top</p>
  <div>Maximising Div</div>
  <p id="p2">Long block that only appears on the bottom</p>
</div>

当屏幕尺寸小于480px时，我需要重新排序div。

我不想使用，position: absolute因为绿色区域的高度可能会因文字数量而异。

我需要将小屏幕顺序设置为红色，绿色，红色，绿色，红色，绿色（每个红色都位于紧邻的绿色之上，宽度为100％）。

任何的想法？非常感谢

*, html, body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
}

.full_half {
    display: inline-block;
    width: 50%;
    background-color: green;
    float: left;
    min-height: 100px;
}

.pic {
    background-color: red;
    height: 100px;
}

.text {
    box-sizing: border-box;
    padding: 20px 120px;
}

@media screen and (max-width: 480px) {
    .full_half {
      width: 100%;
    }
    
    .text{
     padding: 0 0 !important;
    }
}

<div class="container">
    <div class="full_half pic"></div>
    <div class="full_half text">test</div>
</div> …

我目前正在开发一个论坛主题，并试图弄清楚如何完成最后的工作，即帖子。我想做的例子：

因此，这里要记住的关键是用户信息和帖子内容如何具有不同的颜色，以及网格中的帖子描述与帖子内容位于同一列中。

使用简单的 div 设置不起作用，因为我需要用户信息高度来控制帖子内容的高度，反之亦然。使用具有用户信息背景颜色的包装元素是可行的，但前提是帖子内容高于用户信息。

我真的只是在这里寻求头脑风暴。这样做的最佳方法是什么？

我创建了最终结果的草稿，如下所示：

您提供的代码稍作修改应该没问题，但我有一些问题。

1）你评论说描述有一个设定的高度？有必要吗？最坏的情况我只是在媒体查询中调整这个高度。

2）我可能也需要在帖子描述中包含一些列。正如您在我的草稿中看到的，左侧容器中包含帖子的时间戳（我们称之为 desc-meta），右侧有一个带有 ID 的永久链接（我们称之为 desc-ID）。两者之间还有一组帖子选项（编辑、报告等）（我们称之为 desc-edit），但与描述的右侧对齐。根据我对 flex 的简要了解，我无法弄清楚如何始终将 desc-meta 和 desc-ID 保持在同一行，而如果需要在较小的屏幕上，可以将 desc-meta 向下移动。

我想在我的css表中使用百分比.不幸的是,它对我不起作用.

这段代码出了什么问题？我应该使用flexbox而不是table吗？

我想用表,因为我想要相同的高度列.

ul {
  list-style: none;
  margin: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}

li {
  width: 50%;
  display: table-cell;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

假设我<ul>在响应式设计中使用以下内容:

li {
  display: inline;
  padding-right: 1em;
}

<ul>
  <li>
    MenuItemHeinz
  </li>
  <li>
    MenuItemHinrich
  </li>
  <li>
    MenuItemRoffen
  </li>
  <li>
    MenuItemStaffRoffeltack
  </li>
  <li>
    MenuItemHeinz
  </li>
</ul>

当我调整浏览器窗口的大小或查看手机中的页面时,它会像这样断开:

如何让菜单项在打破时很好地排列在网格上,例如像这样？最好只使用css ...当然;)

我有一个基本的表单,将输入传递给PHP脚本.我想拆分表单,以便第二个子条目(Person 2)位于第一个(Person 1)右侧的列中,而不是直接位于下面.

<link rel="stylesheet" href="test.css">    
    <form class="form-validation" method="post" action="script.php">
       <link rel="stylesheet" href="test.css">
       <h2>Person 1:</h2>
       <br>
       <div class="form-row form-input-name-row">
          <label>
          <span>Name</span>
          <input name="field1" type="text">
          </label>
       </div>
       <div class="form-row form-input-name-row">
          <label>
          <span>Age</span>
          <input name="field2" type="text">
          </label>
       </div>
       <div class="main-content">
          <h2>Person 2:</h2>
          <br>
          <div class="form-row form-input-name-row">
             <label>
             <span>Name</span>
             <input name="field3" type="text">
             </label>
          </div>
          <div class="form-row form-input-name-row">
             <label>
             <span>Age</span>
             <input name="field4" type="text">
             </label>
          </div>
    </form>
    <div>
    <button name="submit">Submit form</button>
    </div>
    </div>

我有以下代码，我想将文本垂直居中放置在图像旁边。

.section_content {
    width: 400px;
}

.section_content > ul > li > img {
    width: 40px;
    height: 40px;
    padding: 5px;
}

.section_content > ul > li > a {
    vertical-align: top;
}

.section_content > ul > li {
    list-style-type: none;
}

.section_content > ul {
    list-style-type: none;

    padding-top: 45px;
    padding-left: 5px;
}

<div class="section_content">
        <ul>
            <li><img src="img/linkedin.svg"><a href="https://be.linkedin.com/in/lel">LinkedIn</a></li>
            <li>GitHUb</li>
        </ul>
    </div>