小编Coo*_*ame的帖子

如果当前行的宽度太窄，将孩子的溢出移到下一行

编辑： 我正在构建一个简单的事件日历（使用 HTML+CSS）并且目前正在处理多天事件。

我是 HTML&CSS 的初学者，有一个非常简单的问题，但我似乎无法找到答案：如果没有，如何让子 div 溢出到下一行（div 等）屏幕上（或 div 行）有足够的空间来容纳整个子 div？你能不能只用 HTML&CSS（如果可能）最多一点JavaScript来做？这就是我的意思应该发生：

如您所见，因为蓝色子 div 溢出到 div 的第二行，因为它太大而无法放入第一行。目前，如果我的蓝色 div 太大，它只会溢出到一边（运行下面的代码）。

    html, body {
      left: 0;
      margin: 0;
      background:white;
      height:100%;
    }
    
    b{
      font-family:calibri;
      padding-left:10px;
    }
    
    #container{
      margin: 20px auto;
      width:300px;
      height: 150px;
      border: 1px;
      position:relative;
    }

    .colorone{
      background:#FFEB3B;
      width:150px;
      height: 150px;
      float:left;
    }
    .colortwo{
      width:150px;
      height: 150px;
      background:#8BC34A;
      overflow:hidden;
    }
    .colorthree{
      left: 10px;
      position: absolute;
      width: 150%;
      height: 20px;
      background:blue;
      overflow:hidden;
    }

Run Code Online (Sandbox Code Playgroud)

    <html>
      <body>
      <div id="container">
         <div class="colorone">
           <b>4</b> …

Run Code Online (Sandbox Code Playgroud)

html css overflow

Coo*_*ame

2020 07-19

5
推荐指数

1
解决办法

244
查看次数

React Native：带有文本的内联图像

我是对原生布局做出反应的新手。

我想把内联的句子用图像分隔，其中句子是内联的，图像就像逗号......

我做了一个包含数组的 json 文件，我在它上面创建了 map 函数，并在其中放置了文本标签和图像标签。

但是输出与我的设计不符。

import React, { Component } from 'react';
import image1 from './assets/image.jpg'
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  Image,
} from 'react-native';
import Monday1 from "./data/monday1";
class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <ScrollView>
        <View style={{ marginRight: 20, marginLeft: 20, marginTop: 20 }}>
          <View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
            {Monday1.map((Monday1Text, key) =>
              <View style={styles.border2}>
                <View style={styles.border}>
                  <Text key={key} style={styles.text}>
                    {Monday1Text}
                  </Text>
                </View>
                <Image style={{ …

Run Code Online (Sandbox Code Playgroud)

javascript layout text image react-native

Mon*_*ini

2019 11-13

3
推荐指数

1
解决办法

4316
查看次数