我很难整合它的crasy.我漂浮了很多我的东西,并发现每当我开始浮动的东西,我必须浮动它的容器和容器容器和恶心,否则容器崩溃.

所以看看我的网站现在它是一个相当不错的稳定但是如果我在身体上放置一个边框,我看到它在顶部是1px高,而在身体的一切都在外面.如果我漂浮身体然后一切看起来不错,但:

1-那是不好的设计,我应该怎么做？

2-如果可以,我该如何居中？我使用保证金:自动.但是一旦身体浮起,就会停止工作.

这是我的CSS.

    body {
    width: 960px;
    font-size: 13px;
    margin: auto;
    margin-top: 20px;
    border: 1px #000 solid;
}

.wrapper {
    float: left;
    width: 960px;

}

.header {
    float: left;
    width: 960px;
    border: 1px #000 solid;
    margin-bottom: 20px;
}

.menu {
    width: 960px;
    float: left;
    border: 1px #000 solid;
}

.sidebar {
    width: 260px;
    float: left;
    margin-top: 20px;
    margin-left: 20px;
}

.content {
     border: 1px #000 solid;
   margin-left: 20px;
    margin-top: 20px;
    width: 620px;
    float: left;
    padding: 10px;
}

.footer …

我最近设计了一些需要并排的内容,并且高度会自动调整大小,但高度不会调整大小.div不会扩展到其内部项目的大小.有没有办法让div扩展到它内部元素的大小？

CSS

* {
    padding: 0px;
    margin: 0px;
}
body {
    font-family: 'Metrophobic', sans-serif;
    background-color: #c5c5c5;
    background-image: url('../images/noise.png');
}
#container {
    width:900px;
    background-color: #dbdbdb;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    box-shadow: 0px 0px 5px black;
}
.center_align {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}
#header {
    height:80px;
    font-size: 60px;
    padding: 10px;
    text-align: center;
}
#menu {
    width:900px;
    height:50px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #cacaca;
}
.menu_link {
    width:224px;
    height:50px;
    text-align: center;
    font-size: 35px;
    float: left;
    opacity: 0.3; …

所以我已经在这个CSS上绞尽脑汁了一段时间,需要有人用一双新鲜的眼睛来看它...基本上发生的事情是我在页脚中有4根相邻的列,但最后一列自动在第3列下移动.我看不出发生了什么让它做到了这一点？!

看看下面的链接:

test.snowflakesoftware.com

下面是CSS:

    #mod_footer {
    width: 100%;
    background: url(images/footer.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #212530;
}
    .mod_footer_container {
        margin: 0 auto;
        width: 1200px;
        padding-top: 25px;
    }
        .mod_footer_col {
            float: left;
            width: 25%;
            padding-right: 25px;
        }
        #mod_footer_col_end {
            float: left;
            width: 25%;
        }
            #nav-bottom-left,
            #nav-bottom-left ul {list-style-image: url(images/bullet.png); font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; color: #FFF;}
            #nav-bottom-left a {}
            #nav-bottom-left li {margin-left: 25px;}

            #nav-bottom-right,
            #nav-bottom-right ul {list-style-image: url(images/bullet.png); font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; color: #FFF;}
            #nav-bottom-right …

我正在尝试一步一步(总共4个步骤)结账.我想过有一种水平滑块设置.

我创建了一个宽度为400%的容器,包含4个容器.这些容器应并排放置并填充100%的窗口.这是一种水平滑块,但我想将它用作表格.

[[[容器1] [容器2] [容器3] [容器4]]]

我的HTML:

    <div class="container fullWidth">

        <div id="checkoutContainer">

            <div class="checkout" id="cart">Cart</div>
            <div class="checkout" id="contact">Contact</div>
            <div class="checkout" id="address">Addresse</div>
            <div class="checkout" id="overview">Übersicht</div>
            <div class="checkout" id="thankyou">Danke</div>

        </div>

    </div>

我的CSS:

.container.fullWidth {
    width : 100%;
    overflow-x: hidden;
}

div#checkoutContainer {
    background-image: url(../img/background.jpg);
    background-repeat : repeat-x;
    width : 500%;
    height : 657px;
}

div#checkoutContainer div.checkout {
    float : left;
    width : 900px;
    height : 657px;
}

现在的问题是:我可以以某种方式使单个div填充页面的宽度而不使用javascript(我知道我可以检测页面宽度并设置宽度)？设置div.checkout { width : 100% }不起作用,因为它们将相互堆叠.

我有div容器,固定大小600px.我想在一行中填充一些div (数字是动态值).

像这样的东西:

|---------------------------container-------------------------|
|----box1----||----box2-----||-----box3-----||------box4------|

所有盒子必须具有相同的尺寸

我在CSS中进行布局时遇到了一些问题.这是我正在谈论的代码:小提琴.

1. 该<div id="header">应有的高度,<div id="menubuttons">这是我标记为红色.我一直认为,如果你没有陈述div的高度,它将获得它的孩子的高度.
2. 该<div class="contentLine>粘在<div id="theme">我虽然定义margin-top: 20px;.
3. 右列的余量始终大于左列.我希望两者都与浏览器窗口具有相同的余量.

CSS

body {
    margin: 0 auto;
    padding: 0;
    font-family:'Share', cursive;
}
#header {
    width: 100%;
    vertical-align: middle;
}
#header_logo {
    width:;
    float: left;
    margin: 11px 20px 20px 20px;
    background-color:;
}
#menubuttons {
    margin-right: 0;
    margin-top: 0;
    height: 2.5em;
    line-height: 2.5em;
    display: inline-block;
    background-color: red;
}
#menubuttons ul {
    list-style-type: none;
    margin:0;
    padding:0;
}
#menubuttons li {
    float: left;
    margin-right: …

我知道这个问题已经被问过(1,2,3,4,5,6),但这些解决方案似乎是为我工作.

HTML

<div class="wrapper">
    <img src="http://imgur.com/5dEdRvCs.png" />
    <div>
        Lorem ipsum dolor sit amet, consectetur fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

CSS

.wrapper > *{
    float: left;
}

的jsfiddle

我想无论是img和div包装下float left,并与所有为占用所有剩余空间在页面上,这样的文字的div:

相反它看起来像这样:

我已经尝试添加overflow: hidden到包装器,尝试了一些width和min-width设置,但无济于事.

在CSS中必须有一些相对简单的方法来实现这一点.

我开始使用Bootstrap 4进行​​开发，现在发现了这个问题：当使用Bootstrap 3列系统时，由于它使用浮点数，我们可以在一行中插入多列，然后根据指定的“ col-size”填充空间，例如这个 ：

http://codepen.io/seltix/pen/QpXvRJ

 -------   -------   -------
| COL 1 | | COL 2 | | COL 3 |
|       |  -------   -------
|       | | COL 4 | | COL 5 |
 -------   -------   -------

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 panel height-1">
      <div class="bg-danger">this box is a slider with fixed col-6 width and fixes 2 blue boxes height</div>
    </div>
    <div class="col-sm-3 panel height-2">
      <div class="bg-info">blue boxes count may change depending on the content.<br>if there are only …

我试图将三个div并排放在div中间的间距.

这是我需要的形象:

这是我目前的代码:

<style>
  .box {
    float: left;
    width: 33%;
    background-color: red;
    text-align: center;
    color: #fff;
  }
</style>

<div class="box">Div 1</div>
<div class="box">Div 2</div>
<div class="box">Div 3</div>

我当前代码的问题是它在div 1和2以及div 2和3的中间没有我需要的间距.

我试图实现看起来相当简单的东西,但我不确定是否有办法用css完成它.

我有一个连续显示的标签列表.在下面的小提琴中,我修改了tags-wrapper模拟行包装的大小.

现在我想做的是在最后一个标签之后直接添加输入(在同一行上).我不确定这是怎么可能的,因为这意味着输入将在tags-wrapperdiv 内部(如果我错了,请纠正我,但我认为只有绝对定位div才能实现).

实际上我想要做的是忽略tags-wrapperdiv并将我的输入直接放在最后一个tagdiv之后,但是我无法更改html,因为我正在使用角度组件和输入进行开发,并且tags-wrapper它们位于不同的组件中.

.tags-wrapper{
  width: 210px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.tag{
  padding: 2px 3px;
  margin: 1px 2px;
  border: 1px solid black;
}

input{
  width: 60px;
}

<div class='tags-wrapper'>
	<div class='tag'>Basketball</div>
	<div class='tag'>Football</div>
	<div class='tag'>Baseball</div>
</div>
<input placeholder='Search'>