Question

我正在尝试放置这两个div inline。

HTML

<div class="thisFlak">
</div>

<div class="thisFlakNotes">
</div>

CSS

.thisFlak{
  width: 603px;
  height: 253px;
  border: 2px solid red;
  margin-left: 10px;
  margin-bottom: 30px;
}
.thisFlakNotes{
  width: 100px;
  height: 200px;
  border: 1px solid black;
  background: white;
}

我不能把“.thisFlak”搞得太多，因为它有很多其他东西。

FIDDLE
https://jsfiddle.net/xwzcbn6w/

Answer 1

WriteResult api

CSS

.thisFlak {
  width: 603px;
  height: 253px;
  border: 2px solid red;
  margin-left: 10px;
  margin-bottom: 30px;
  /* to make it inline */
  display: inline-block; 
  /* aligning vertically you can make it top / bottom / baseline */
  vertical-align: middle
}

.thisFlakNotes {
  width: 100px;
  height: 200px;
  border: 1px solid black;
  background: white;
  /* to make it inline */
  display: inline-block;
  /* aligning vertically you can make it top / bottom / baseline */ 
  vertical-align: middle 
}

Answer 2

public interface OrganizationService { @Retryable(maxAttempts=3,value=DataAccessResourceFailureException.class,backoff=@Backoff(delay = 1000)) public boolean checkOrganizationWithNameExists(String name); } @Repository @EnableRetry public class OrganizationServiceImpl implements OrganizationService { @Transactional(isolation = Isolation.READ_COMMITTED) @Override public boolean checkOrganizationWithNameExists(String name){ //your code return true; } }将允许您保留尺寸并将div放在同一条线上。它会像句子中的单词一样处理div，所以你需要注释掉它们之间的任何空格，因为它们是不同的高度，你需要添加垂直对齐：

＆＃13;

display:inline-block;

＆＃13;

.thisFlak{
   vertical-align:top;
    width: 603px;
    height: 253px;
    border: 2px solid red;
    margin-left: 10px;
    margin-bottom: 30px;
    display:inline-block;
}
.thisFlakNotes{
   vertical-align:top;
    width: 100px;
    height: 200px;
    border: 1px solid black;
    background: white;
    display:inline-block;
}

＆＃13;

<强>更新

此外，如果您不希望在页面太小而无法放在一行上时对框进行换行，则需要将<div class="thisFlak"> </div><div class="thisFlakNotes"> </div>添加到父级（或确保宽度为父母比两个孩子宽？

Answer 3

通过向两个类添加float:left / display:inline，您可以实现它。

这是更新的小提琴链接Updated fiddle

Answer 4

您正在寻找的是：

display: inline-block;

您的代码：

.thisFlak{
  width: 603px;
  height: 253px;
  border: 2px solid red;
  margin-left: 10px;
  margin-bottom: 30px;
  display: inline-block;
}

.thisFlakNotes{
  width: 100px;
  height: 200px;
  border: 1px solid black;
  background: white;
  display: inline-block;
}

Answer 5

...浮 https://jsfiddle.net/maky/xwzcbn6w/2/

.thisFlak {
  width: 603px;
  height: 253px;
  border: 2px solid red;
  margin-left: 10px;
  margin-bottom: 30px;
  float: left;
}

.thisFlakNotes {
  width: 100px;
  height: 200px;
  border: 1px solid black;
  background: white;
  float: left;
}

Answer 6

只需将display：inline-block或float：left放到每个div

.thisFlak{
  width: 603px;
  height: 253px;
  border: 2px solid red;
  margin-left: 10px;
  margin-bottom: 30px;
  float : left;
  display : inline-block;
}
.thisFlakNotes{
  width: 100px;
  height: 200px;
  border: 1px solid black;
  background: white;
 float : left;
 display : inline-block;
}

如何将div元素内联？

6 个答案: